body {
    background: #eeeeea;
    margin: auto;
    font-family: "Haas Grot Disp Web", sans-serif;
    font-weight: normal;
    font-size: 1.25vw;
    letter-spacing: 0.5px;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    color: #094437;
/*    padding: 10px;*/
    
   
}

div {
    font-family: "Haas Grot Disp Web", sans-serif;
 
/*    font-size: 60px;*/
    
}

                        /*       TEXT    */
.right {
    float: right;
/*    padding-right: 2%;*/
}
.left {
    float: left;
}

#special {
    background: #EF8E92;
}

h2 {

    
}

li {
    
}

p {

}

.clip { 
    
     white-space: nowrap; 
/*    width: 50px; */
    overflow: hidden;
    text-overflow: clip; 
/*    border: 1px solid #000000;*/
}


/* ORANGE */
ul {
    margin: 20px;
    font-weight: normal;
/*    font-size: 35px;*/
/*    color: #104437;*/
    text-transform: none;
}
a {
    text-decoration: none;
    color: #104437;
}

/* WHITE hover */
.link:hover{
    color:white;
}
a:hover {
    color: white;
}
.expand:hover, .close:hover {
    color: white;
}
h1:hover {
    color: white;
}

/* TAN */
.expand, .close3 {
    color: #104437;
/*    float: right;*/
/*    left: 90%;*/
/*    position: fixed;*/
}
h1 {
    font-family: "Haas Grot Disp Web", sans-serif;
    font-weight: normal;
/*
    font-size: 2em;
    padding-left: 2%;
    padding-top: 2%;
*/
    color: #104437;
}
h1 a {
   color: #104437; 
}

/*
#title {
    position: fixed;
    
}
*/

.title {
/*    color: white;*/
    color: #094437;
    float: right;
     position: fixed;
/*      position: fixed;*/
/*    font-size: 2.5em;*/
   
}

.title:hover {
    color: #eeeeea;
}

.foot {
/*    position: fixed;*/
/*    padding-top: 10%;*/
/*    background-color: yellow;*/
    color: red;
}
span {
    background-color: #094437;
    padding: 0.75%;
    color: #eeeeea;
    text-transform: none;
}

.pink {
    background-color: #EF8E92;
    color: #104437;
}

.header {
/*
    padding: 0px;
    margin: 0px;
*/
    display: block;
    width: 100%;
    position: fixed;
}

.header img {
    float: left;
    height: 10%;
}

.video {
    display: none;
    padding:5%;
}
.info2 {
    display: none;
}

.close {
    display: none;
    float: right;
    padding:50px;
}
.close:hover {
    color:white;
}

.close2 {
    display: none;
}

#closeAbout {
    display: none;
}



.navigation {
    margin: auto;
/*    padding: 20px;*/
}


#project {
/*    margin: auto;*/
/*    padding: 40px;*/
    width: 70%;
    height: auto;
    display: block;
/*    background: yellow;*/
}

#project2 {
    margin: auto;
    width: 65%;
    height: auto;
    float: right;
/*    padding-right: 10%;*/
/*    display: block;*/
/*    background: yellow;*/
}

#thumbnail {
    margin: auto;
    width: 65%;
    height: auto;
    display: block;
/*    background: yellow;*/
}

#back {
    margin-bottom: 10px;
    position: fixed;
    margin-left: 80%;
/*    padding: 20px;*/
    float: right;
/*    width: 75%;*/
/*    background: yellow;*/
}

iframe {
    width: 100%;
}

img {
/*    display: block;*/
    margin: auto;
}

    /*          TABLE       */
table {
    border-collapse: collapse;
    width: 20%;
    position: fixed;
}

th, td {
/*    padding: 20px;*/
    text-align: left;
    border-bottom: 1px solid #ddd;
}

tr:hover{
    background-color:#f5f5f5
}

.grid-ul {
    list-style: none;
    margin: 0;
    display: block;
    height: 25%;
/*    position: fixed;*/
    text-align: center
}
.grid-ul li {
  display: block;
/*    padding-top: 20px;*/
}
.grid {
  text-align: center;
}

.odd {
/*    background-color: #E9DBCB;*/
    
    background: #ff0000;
    background: -moz-linear-gradient(left, #ff0000 0%, #ffffff 100%);
    background: -webkit-linear-gradient(left, #ff0000 0%,#ffffff 100%);
    background: linear-gradient(to right, #ff0000 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=1 );
    padding-bottom: 18px;
}
.odd a{
    text-decoration: none;
    color: white;
}

.odd:hover {
    background: #ffffff;
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ff0000 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ff0000 100%);
    background: radial-gradient(ellipse at center, #ffffff 0%,#ff0000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ff0000',GradientType=1 );
}

.even {
    background: #ffffff;
    background: -moz-linear-gradient(left, #ffffff 0%, #ff0000 100%);
    background: -webkit-linear-gradient(left, #ffffff 0%,#ff0000 100%);
    background: linear-gradient(to right, #ffffff 0%,#ff0000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ff0000',GradientType=1 );
    padding-bottom: 18px;
}

.even a{
    text-decoration: none;
    color: white;
}

.even:hover {
    background: #ffffff;
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ff0000 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ff0000 100%);
    background: radial-gradient(ellipse at center, #ffffff 0%,#ff0000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ff0000',GradientType=1 );
}


            /*  FONTS   */

@font-face {
    font-family: "Univers";
    src: url(http://users.dma.ucla.edu/~emilyliisaeck/Network%20Media/portfolio/03_fonts/Univers_45_Light.ttf) format("truetype");
}

@font-face {
  font-family: 'Haas Grot Disp Web';
  src: url('http://users.dma.ucla.edu/~emilyliisaeck/Network%20Media/portfolio/03_fonts/NeueHaasGrotDisp-55Roman-Web.ttf') format("truetype");
  font-weight:  500;
  font-style:   normal;
  font-stretch: normal;
}

.NeueHaasGrotDisp-55Roman-Web {
  font-family: 'Haas Grot Disp Web', Sans-Serif;
  font-weight:  500;
  font-style:   normal;
  font-stretch: normal;
}

                        /*  IMG BLUR    */

* {
  margin: 0;
  padding: 0;
  overflow: auto;
}

.blur {
/*
  width: 100%;
  height: 100%;
*/
/*  margin: -5% 0 0 -5%;*/
    margin: 0 auto;
}

.blur img {
    width: 100%;
    height: auto;
/*    display: inline;*/
/*
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -o-transition: all .25s ease;
  -ms-transition: all .25s ease;
  transition: all .25s ease;
*/
}

.blur img:hover {
  -webkit-filter: blur(15px);
  -moz-filter: all .25s ease;
  -o-filter: all .25s ease;
  -ms-filter: all .25s ease;
  filter: blur(15px);
}