@font-face {
    font-family: 'Ubuntu';
    src: url('Ubuntu.otf');
    src: url('Ubuntu.eot?#iefix') format('embedded-opentype'),
         url('Ubuntu.woff2') format('woff2'),
         url('Ubuntu.woff') format('woff'),
         url('Ubuntu.ttf') format('true-type'),
         url('Ubuntu.svg') format('svg');

    font-weight: normal;
    font-style: normal;

}




/* Phones and Tablets Mobile first */
    
   body, input { font-family: 'Ubuntu', sans-serif, normal, normal;  }
    p { font-size: .9em; font-style: normal; line-height: 1.7em; }
    cap { font-size: .7em; font-style: normal; display:block; margin-bottom:2em;}
	blockquote { font-size: 1em; font-style: normal;   }

	em { font-size: .9em; font-style: italic;  }
	ul li { font-size: .9em; font-style: normal;  }
	h1 { font-size: .9em; font-weight: normal; text-decoration: underline; }
	h2 { font-size: 1em; font-weight: normal; }

	h3 { font-size: 1em; font-weight: normal; }
	h4 { font-size: 1em; font-weight: normal; }
	a { text-decoration: none; }
	
	a:hover,a:focus {
  display: inline;
  color:#0000ff;
  text-decoration:underline;

}

a:visited {
      color:#0000ff;
    text-decoration:underline;
}

	html, body {
	    height: 100%;
	    overflow-x: auto;
	    overflow-y: auto;
        margin: 0;
             background-color: #f5f3f0;

	}
   
          /* navigation for mobile */
   

   overlay {
     display: block;
     position: fixed; 
     z-index: 2;
     top: 0;
     left: 10px; 
     background-color: #f5f3f0;
 }  

   button {
    background-color:transparent;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
    border: 10px;
	display:block;
    position: fixed;
    right: 20px;
    z-index: 3;
	cursor:pointer;
	color:#050505;
	font-family:'Arial', sans-serif;
	font-size:40px;
	font-weight:bold;
	padding:6px 11px;
	text-decoration:none;
	
}
button:hover {
	background-color:transparent;
}
button:active {
	position: fixed;
	top:1px;
}
button:focus {
    outline: none;
}


  #nav {
     display: none;
     width: 60%;
     height: 100%;
     padding: 10px;
     position: fixed;
     top: 0;
     z-index: 1;
     background-color: #ffffff;
     overflow-x: auto;
	}

	left {
      width: 90%;
	  border-style: none;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 50px;
	  height: auto;
	  left: 1%;
	  position: relative;
	  float: left;
      z-index: 0;
	  overflow-x: none;
	  background-color: #f5f3f0;
	}


	right {
      width: 90%;
	  border-style: none;
      padding-left: 10px;
      padding-right: 10px;
	  height: auto;
      left: 1%;
	  position: relative;
	  float: left;
      z-index: 0;
	  overflow-x: none;
	  background-color: #f5f3f0;

	}
    
    full-width {
      width: 90%;
      height: auto;
      border-style: none;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 50px;
      left: 1%;
	  position: relative;
	  float: left;
      z-index: 0;
	  overflow-x: none;
	  background-color: #f5f3f0;
      
    }
    
    #home-page {
              max-width: 800px;
              margin-right: auto;

    }


  .column {
    width: 100%;
  }
    
 
 img {
    max-width: 100%;
    height: auto;
    margin-top: 14px;
}


/*PROJECTS TABLE*/

  table thead {
    display: none;
   
  }
  table td {
    display: flex;
  }
  

  
table {
    width:100%;
    
}


tr: {
    background-color: #f2f2f2;
    
    
}

th, td {
    text-align: left;
    vertical-align: top;
    padding: .5%;
    height: auto;

}

#title {
    width: 100%;
}

#desc {
        width: 100%;
}

#image {
        width: 100%;
}

#year {
        width: 100%;
}



.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B2\25BC" 
}

/*PROJECTS TABLE*/


/* desktop */
@media only screen and (min-width: 743px) {


   
	html, body {
	    height: 100%;
	    overflow-x: auto;
	    overflow-y: auto;
        margin: 0;
	}
    


     #nav {  
      display: block!important;    
      width: 18%;
	  border-style: none;
      padding-top: 2%;
      padding-bottom: 2%;
      padding-left: 1%;
      padding-right: 1%;
      height: 96%;
	  position: fixed;
	  float: left;
      z-index: 0;
	  overflow:auto;
	  background-color: #f5f3f0;
	}
    


	left {
	  width: 38%;
	  border-style: none;
      padding-top: 2%;
      padding-bottom: 2%;
      padding-left: 1%;
      padding-right: 1%;
	  height: 96%;
	  left: 20%;
	  position: fixed;
	  float: left;
      z-index: 0;
	  overflow-x:auto;
	  background-color: #f5f3f0;
	}


	right {
	   width: 38%;
	  border-style: none;
      padding-top: 2%;
      padding-bottom: 2%;
      padding-left: 1%;
      padding-right: 1%;
      height: 96%;
      left: 60%;
	  position: fixed;
	  float: left;
      z-index: 0;
	  overflow-x:auto;
	  background-color: #f5f3f0;

	}
    
    full-width {
        max-width: 78%;
      border-style: none;
      padding-top: 2%;
      padding-bottom: 2%;
      padding-left: 1%;
      padding-right: 10%;
      height: 96%;
      left: 20%;
	  position: fixed;
	  float: left;
      z-index: 0;
	  overflow-x:auto;
	  background-color: #f5f3f0;
    }
    
        full-width > p{
        max-width: 50%;
  
    }

 img {
    max-width: 100%;
    height: auto;
    margin-top: 14px;
}

.column {
  float: left;
  width: 30%;
  padding: 1%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


  table thead {
    display: table-header-group;
    width: 100%;
      text-align: left;
    padding: .5%;
    height: auto;

  }
 
  
  table td {
    display: table-cell;
  }
  
  
  
table {
    max-width:1200px;
    table-layout: fixed;
    display: block;

}



th, td {
    text-align: left;
    padding: .5%;
    height: auto;

}
td img {
    padding-top: .5em;
}

td audio {
    padding-top: 1.1em;
}

th {
    font-size: .7em;
    
    
}

#title {
    width: 25%;
        min-width: 100px;
        max-width:200px;
}

#desc {
        min-width: 200px;
}

#image {
        width: 25%;
        min-width: 300px;
}

#year {
        width: 25%;
        min-width: 100px;
        
}



    overlay {
        display: block;
    }
    
    button {
        display:none;
    }
    
}

    /* desktop */
@media only screen and (min-width: 2000px) {
    	left {
	  width: 30%;
 left: 20%;
	  position: fixed;
	}


	right {
	   width: 30%;
 left: 52%;
	  position: fixed;

	}
    
    full-width {
       max-width: 60%;

    }

}