html {
    background: #222222;
    color: #BDBDBD;
    font-family: "Roboto";
    font-weight: 300;
    /*font: normal normal normal 16px / 1.25 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale*/
}


a {
    color:white;
    text-decoration: none;
    display:inline-block;
    position:relative;
}

a:hover {
  text-decoration: underline;
}
/*a:after, .maps:after {
  content:'';
  display:block;
  width:0;
  height:1px;
  background-color:white;
  transition: width 0.2s;
}

a:hover:after {
  width:100%;
}*/

.maps:hover:after {
  color:red;
  // background-color:red;
}

h3 {
    font: 24px "Roboto";
    font-weight:400;
    color: #BDBDBD;
    border-bottom:2px solid #BDBDBD;
    text-transform: uppercase;
    letter-spacing:2px;
    padding-bottom:5px;
}

p {
    padding:0px 20px;
    text-align:justify;
}

ul {
    list-style:none;
    margin:0;
    padding:0;
}

.papers-link-list {
    display:flex;
    flex-direction:row;
    justify-content: left;
    align-content:center;
    text-transform:uppercase;
}

.papers-link-list li:not(:first-child) {
  margin-left:15px;
}

.bibtex-block {
    display:none;
    white-space:pre-wrap;
}

.material-icons {
    vertical-align:bottom;
    margin-right:30px;
}

#bio-text {
    text-align:justify;
    white-space:pre-line;
}

#side-panel {
    display:block;
    position:fixed;
    top:0;
    overflow:hidden;
    box-sizing:border-box;
}

#main-content {
  margin-left:22%;
}

#side-panel::-webkit-scrollbar,
#main-content::-webkit-scrollbar {
    display:none;
}

#information-list,
#office-list,
#keywords-list {
    display:block;
    list-style:none;
    margin:auto;
    padding-left:0;
}

#information-list { width:300px; }
#office-list { width:300px; }
#keywords-list { width:250px; }


#information-list > li,
#office-list > li {
    margin-bottom:10px;
}

#information-list .icon,
#office-list .icon {
    width:24px;
    height:24px;
    vertical-align:middle;
    margin-right:15px;
}

#office-list .icon {
    margin-right:5px;
}

#office-list .info-lab-list {
    display:inline-block;
    vertical-align: middle;
    list-style:none;
    margin:0;
    padding-left:5px;
    border-left:1px solid #9E9E9E;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
}

#info-divider {
    width:90%;
    height:1px;
    margin:10px auto;
    background:#BDBDBD;
}

#headers-list {
    font: 1.5em "Roboto";
    font-weight:400;
    display:none;
    width:85%;
    margin:auto;
    list-style:none;
    padding-left:0;
    text-align:center;
}

#languages {
    width:120px;
    height:50px;
    margin:20px auto;
}

.flag {
    float:left;
    display:block;
    width:40px;
    height:30px;
    margin:0px 8px;
    border:2px solid white;
    border-radius:25px;
}

.flag.selected {
    border:2px solid #FF963F;
}

#fr-flag {
    background: no-repeat url('img/french-flag.png') center center / cover;
}

#en-flag {
    background: url('img/british-flag.png') center center / cover;
}

.custom-section {
    margin:0 2.4%;
}

#labs-block {
    margin:30px auto;
    width:50%;
    min-width:500px;
    height:100px;
}

#labs-block .map-ref {
    display:block;
    position:absolute;
    right:5px;
    z-index:3;
    width:32px;
    height:32px;
    background:url("img/map.png") no-repeat center center / 100%;
}

#lab-separator {
    display:table;
    float:left;
    width:20%;
    height:100%;
    font: normal normal 24px/1 ModernM;
    color: #ff963f;
    text-align: center;
    text-decoration: underline;
}

#labs-block .lab-cell {
    display:block;
    float:left;
    box-sizing:border-box;
    width:40%;
    height:100%;
    font:normal normal 32px/1 ModernM;
}

#labs-block .lab-img {
    position:relative;
    display:table;
    border:2px solid #ff963f;
    width:100%;
    height:100%;
    border-radius:20px;
    background-position: center center;
    background-size:cover;
}

#telecom-img {
    background-image:url("img/telecom.jpg");
}
#lri-img {
    background-image:url("img/lri.jpg");
}

#labs-block .cache {
    position:absolute;
    width:100%;
    height:100%;
    z-index:0;
    background:rgba(100,100,100,0.4);
}

#labs-block .lab-link,
#labs-block p {
    position:relative;
    display:table-cell;
    vertical-align: middle;
    text-align:center;
    width:100%;
    height:100%;
    z-index:1;
}

#teaching-text .year {
    display: table;
    position: relative;
    width: 100%;
    height: 120px;
    margin-bottom:10px;
}

#teaching-text .left-panel {
    display: block;
    position: relative;
    float: left;
    width: 60px;
    height: 100%;
    margin-right:5px;
    border-right: 2px solid #BDBDBD;
}

#teaching-text .lp-text {
    position: absolute;
    left: -60px;
    transform: rotate(270deg) translatey(60px) translatex(-40px);
    font: 1em "Roboto";
    font-weight: 300;
    letter-spacing: 2px;
}

#teaching-text .right-panel {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: 92.5%;
}

#teaching-text .right-panel > ul {
    list-style:none;
    padding-left:0px;
}

#teaching-text .right-panel > ul > li {
    margin:5px 0px;
}

.publication {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-content:center;
    align-items:center;
    max-width:1000px;
    margin-bottom:10px;
}

.publication-section {
	font-size:12pt;
	text-transform:uppercase;
	color:#BDBDBD;
	font-weight:bold;
	letter-spacing:2px;
	border-left:5px solid #BDBDBD;
	padding-left:10px;
}

.publication-thumbnail {
    flex:1.5;
    text-align:center;
}
.publication-thumbnail img {
    display:block;
    width:90%;
    margin:auto;
}
.publication-thumbnail i {
  display:block;
  width:100%;
  font-size:42pt;
}

.publication-info {
    flex:6;
}

.publication-title {
    font-weight:bold;
}

.para-bibtex {
  display:none;
  white-space:pre-wrap
}

/* responsive layout */
@media only screen and (max-width: 799px) {
  body {
    width:100%;
    margin:0;
    overflow:auto;
  }

  #side-panel {
    display:block;
    position:relative;
    width:100%;
    padding-bottom:20px;
    border-bottom:2px solid #FF963F;
    background:rgba(0,0,0,0.3);
  }

  #headers, #info-divider {
    display: none;
  }
  #portrait-frame {
  	position:relative;
  	width:125px;
  	height:125px;
  	margin:10px auto 10px auto;
  	background:url("img/portrait.jpg") no-repeat center center / cover;
  	border-radius:100px;
  	border:2px solid white;
  }

  #main-content {
    width: 100%;
    height:85%;
    margin: 0;
  }
}


/* desktop layout */
@media only screen and (min-width: 800px) {
    #main-container {
    	width:90%;
    	min-width:1100px;
    	margin:auto;
    }

    .mobile { display:none; }

    #side-panel {
      background:#2b2b2b;
    	float:left;
    	width:20%;
    	height:100%;
    	padding:40px 0px;
    }

    #main-content {
      width:80%;
      padding:40px 0px;
    }

    #portrait-frame {
    	position:relative;
    	width:175px;
    	height:175px;
    	margin:10px auto 10px auto;
    	background:url("img/portrait.jpg") no-repeat center center / cover;
    	border-radius:200px;
    	border:2px solid white;
    }

/*    .publication-thumbnail {
        display:inline-block;
        width:12%;
        height:100%;
    }

    .publication-info {
        display:inline-block;
        vertical-align:top;
        width:80%;
        height:100%;
        margin-left:20px;
        border:none;
    }*/
}