/* Fonts  */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: local('Karla'), local('Karla-Regular'),
       url('fonts/karla-v13-latin-regular.woff2') format('woff2'), 
       url('fonts/karla-v13-latin-regular.woff') format('woff'); 
}

@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    font-style: normal;
    src: local('Roboto'), local('Roboto-Regular'),
       url('fonts/RobotoSlab-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Fira';
    src: url('fonts/firasansextracondensed-regular-webfont.woff2') format('woff2'),
         url('fonts/firasansextracondensed-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    font-weight: 400;
    font-style: normal;
    src: url('fonts/Lato-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'),
       url('fonts/Raleway-Regular.ttf') format('truetype');
}

/* font aswesome */

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    overflow-x: hidden;
}

/* basic elements */
body {
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-size: 14pt;
    line-height: 1.5;
    
    background: white;
}

h1 {
    border-left: solid;

    display: block;

    padding: 20pt;
    padding-top: 1pt;
    padding-bottom: 1pt;

    margin-top: 20pt;
    margin-bottom: 40pt;

    font-family: 'Raleway', sans-serif;
    font-size: 28pt;
}

h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 16pt;

    width: 100%;
}

h3 {
    padding-top: 7pt;
    padding-bottom: 7pt;

    margin-top: 1em;
    margin-bottom: 0em;
    
    font-family: 'Raleway', sans-serif;
    font-size: 16pt;
}

h4 {
    margin-block-end:.5em;
    margin-block-start:.5em;

    font-weight: normal;
}

li {
    margin-bottom: 1em;
}

ul {
    display: block;
    width: 100%;
    margin-top: 20pt;
    margin-bottom: 20pt;
}

q {
    font-style: italic;
}

a {
    color: #1829a9;
    text-decoration: none;
}

.keyword {
    font-weight: bold;
    color: #1829a9;
}

hr {
    display: block;
    width: 100%;
    border-top: 1px dashed lightgrey;
}

.right-align {
    float: right;
    margin-bottom: auto;
}


/* specialised elements (old) */

q.abstract {
    display: block;    
    font-size: 14pt;
    margin-left: 10pt;
}

.fullwidth {
    width: 100%;
}

.flexibox {
    flex: 1 1 40%;
}

/* menu */
#menu {
    width: 400px;
    height: 100%;  

    position: fixed!important;
    top: 0;
    left: 0;
    
    overflow: hidden;

    padding-top: 20pt;
    background-color: #dddddd;
}

#menu-items {
    padding-left: 40pt;
    margin-top: 20pt;
    
    line-height: 12pt;
    font-family: Fira;
    font-size: 18pt;
}

#menu-items > div {
    margin-top: 5pt;
    margin-bottom: 5pt;
    padding: 7pt;

    background-color: #dddddd;
}

#menu-items > *:hover {
    background-color: #eeeeee;
}

#page-about > nav > #menu-items > #men-about,
#page-research > nav > #menu-items > #men-research,
#page-papers > nav > #menu-items > #men-papers,
#page-talks > nav > #menu-items > #men-talks {
    background-color: white;
}

#portrait {
    width: 250px;
    height: 250px;
    
    overflow: hidden;
    display: block;

    margin: auto;
    margin-top: 5px;
    margin-bottom: 0px;
}

#portrait > img {
    width: 100%;
}

#name {
    text-align: center;
    font-size: 20pt;
}

#bottom-bit {
    position: fixed;

    display: flex;
    justify-content: space-evenly;
    
    bottom: 0;
    left: 0;
    width: inherit;
    vertical-align: middle;
}

#bottom-bit a {
    margin: 6pt;
    
    color: black;
    font-size: 12pt;
}

#bottom-bit img {
    vertical-align: middle;
}

#bottom-bit span {
    vertical-align: middle;
    padding-left: 2pt;
}

#contact {
    margin-left: 20pt;
    vertical-align: top;
}

#contact th {
    font-weight: normal;
    text-align: left;
    vertical-align: top;
}

#contact p {
    margin: 0;
}

#contact th:first-child {
    text-align: right;
    font-style: italic;
    padding-right: 20pt;
    padding-bottom: 10pt;
}

.menu-icon {
    font-size: 10pt;
    width: 40px;
    display: inline-block; 
}

/* container */
#main-content {
    margin-left: 400px;

    display: flex;
    flex-direction: column;
}

.page-wrapper {
    margin: auto;
    margin-top: 80pt;
    margin-bottom: 80pt;
    width: 900px;

    box-sizing: border-box;
    
    padding-left: 30pt;
    padding-right: 30pt;
}

.page-wrapper > p {
    margin-top: 20pt;
}

.page-wrapper > :last-child {
    margin-bottom: 0;
}

.image-bar {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.image-bar > img {
    height: 80pt;
    margin-right: 10pt;
    margin-left: 10pt
}

.arXiv {
    font-size: 13pt;
}

/* responsive for phone screens */
@media only screen and (max-width: 1300px){
    .page-wrapper {
	width: inherit;
    }

    #main-content {
	margin-left: 30%;
	width: 70%;
    }

    #portrait {
	width: 80%;
    }
    
    #menu {
	width: 30%;
    }
}

@media only screen and (max-width: 700px) {    
    #menu {
        height: 100px;
	width: 100%;
	padding: 0;
	
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
    }

    #menu br {
	display: none;
    }
    
    #name h3 {
	font-size: 14pt;
	margin: 0;
    }
        
    #menu-items {
	flex: 0 1 200px;
	width: 200px;
	
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
    }

    #menu-items > div {
	margin-top: 0;
	margin-bottom: 0;

	padding-left: 7pt;
	padding-right: 7pt;
	padding-top: 12pt;
	padding-bottom: 12pt;

	height: 30px;
	text-align: center;
	background-color: #dddddd;
    }

    #menu-items span {
	padding-top: 2pt;
    }
    
    #menu-items span:last-child {
	display: none;
    }

    
    #portrait,
    #bottom-bit {
        display: none;
    }
    

    #main-content {
	margin: 0;
	margin-top: 100px;
	width: 100%;
    }
}