body{font-family: 'Baskerville', serif;
    font-size:0.8em;line-height: 1.4;
    text-rendering: geometricPrecision; 
    text-align: justify; 
}

big {font-family: 'Baskerville', serif;
    font-size: 1.7em;line-height: 1.3em; 
   text-rendering: geometricPrecision; }

big2 {font-family: 'Open Sans', sans-serif;
    font-size: 1.7em;line-height: 1.3em; font-weight: 300;
   text-rendering: geometricPrecision; }


small {font-family: 'Open Sans', sans-serif; 
   text-rendering: geometricPrecision;}


small2 {font-family: 'Open Sans', sans-serif; 
   text-rendering: geometricPrecision; font-size: 1em;}

small3 {font-family: 'Open Sans', sans-serif; 
   text-rendering: geometricPrecision; font-size: 0.8em;}

/*Portfolio*/

.port {border-bottom: 0px;}

/*Columns*/
 
*					{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;  margin:0; height: 100vh; font-family: 'Baskerville', serif; }

.box 				{  display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; }

.box .column1 		{ flex: 1; overflow-x:auto; background: #fffef9; padding-bottom: 60px; border-right: 1px solid black; font-weight: 300; text-align: left;}


.box .column2 		{ flex: 2; overflow-x:auto; background: #fffef9; padding-bottom: 60px; line-height: 2em;}

.box .column:last-child { margin: 0;}

.box .column2 img {mix-blend-mode: multiply;}
.box .column2 p {padding-left: 3em; padding-top: 7em;}

.box .column2 a:hover {
  background-color: gold;
}

p {height: auto; background-size:cover; 
margin-right: 0; overflow-x:auto; padding: 2em;}

a {font-family: 'Open Sans', sans-serif; color: black; text-decoration: none; }

.portfolio img {resize: both; width: 33%;float: left; mix-blend-mode: multiply;}

table {border-collapse: collapse;  margin: 0; padding: 0;}


/*Navigation*/

nav{}
nav ul {display:none;}
li {height: auto; border-bottom: 1px solid black; font-family: 'Open Sans', sans-serif; font-size: 1.4em; padding-top: 0.5em; padding-bottom: 0.5em; padding-left: 2em; display: block;}
li a{font-family: 'Open Sans', sans-serif; color: black; text-decoration: none; font-size: 1em;}

.list-b:hover + ul {display: contents;}
ul:hover{display: contents;}

nav .list-b {border-bottom: 1px solid black; font-family: 'Open Sans', sans-serif; font-size: 1.4em; padding-top: 0.5em; padding-bottom: 0.5em; background:#ece9e1;display: block;}



.title {font-family: 'Open Sans', sans-serif; font-size: 2.4em; padding: 1em; padding-top: 0.5em;}
.title2 {font-family: 'Open Sans', sans-serif; font-size: 2.2em; padding: 1em; padding-top: 0.5em; font-weight: 300;}
.title3 {font-family: 'Open Sans', sans-serif;font-size:0.8em; font-weight: 300;}

.button {background:black; color:white; font-family: 'Open Sans', sans-serif; font-size: 1.6em; font-weight: 300; padding: 0.8em; border-radius: 3em;}

.selected {background: black; visibility: visible}
.selected a {color: white; font-weight: 300;}

img {
  width: 100%;
  height: auto;
  display: block;
}

/*External links*/

.tooltip {
  text-decoration:none;
  position:relative;
}
 
.tooltip span {
  display:none;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:black;
  background:white; 
}
 
.tooltip span img {
  float:left;
  margin:0px 8px 8px 0;
}
 
.tooltip:hover span {
  display:block;
  position:absolute;
  top:5;
  left:0;
  z-index:1000;
  width:12em;
 height:auto;
  border:1px solid black;
  margin-top:12px;
  margin-left:32px;
  overflow:hidden;
  padding:8px;
}

/*Responsive*/

@media screen and (max-width: 1000px) {
    .title{font-size: 2em;}
    .title2{font-size: 1.8em;}
    big{font-size:1.5em;}
    li{font-size:1.2em;}
nav .list-b{font-size:1.2em;}
.button{font-size:1.3em;}
    .text{padding-right: 3em;}
.hide{display: none;}
    .portfolio img {resize: both; width:50%;}
}