body {
  background-color: #fff;
  font-family: 'Varela Round', sans-serif;
  font-weight: 300;
  font-size: 19px;
  line-height: 150%;
  color: black;
}

h1{
  font-family: 'Varela Round', sans-serif;
  font-size: 50px;
  line-height: 120px;
}

h2{
  font-family: 'Varela Round', sans-serif;
  font-size: 27px;
  line-height: 50px;
}

p{
  margin-bottom: 15px;
}

.header{
  width: 100%;
  background: rgba(0,0,0,0.8);
  position: fixed;
  padding: 20px 0;
  color: #fff;
  z-index: 100;
}
.header .inner{
  width: 95%;
  margin: auto;
}
nav ul li{
  display: inline-block;
  margin: 0 30px;
}
.title{
  float: left;
  font-size: 44px;
  font-family: 'Varela Round', sans-serif;
  line-height: 50px;
  min-width: 300px;
}
.title a{
  color: #fff;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}
.title a:hover{
  opacity: 0.7;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}
nav{
  float: right;
  font-size: 18px;
  font-weight: 700;
  line-height: 50px;
}
nav a, nav a:visited{
  color: #fff;
  text-transform:uppercase;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}
nav a:hover{
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}
nav a.motivation:hover{
  color: rgb(8, 161, 217);
}
nav a.project:hover{
  color: rgb(8, 161, 217);
}
nav a.learn_more:hover{
  color: rgb(8, 161, 217);
}

.back{
  background: rgba(0,0,0,0.7);
  padding: 10px 15px;
  color: #fff;
  display: inline-block;
  position: fixed;
  top: 120px;
  font-size: 14px;
  font-weight: 700;
  opacity: 0.6;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}
.back:hover{
  opacity: 0.9;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}

#motivation a, #motivation a:visited{
  color: #b62f18;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}
#motivation a:hover{
  color: #590e01;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}

#learn_more a, #learn_more a:visited{
  color: #b62f18;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}


fig.icon img{
  display: block;
  width: 60%;
  margin: auto;
  margin-bottom: 20px;
}

fig img{
  display: block;
  width: 100%;
}

fig.shadow img{
  width: 95%;
  margin: auto;
  -webkit-box-shadow:  0px 0px 7px 3px rgba(0, 0, 0, 0.2);
  box-shadow:  0px 0px 7px 3px rgba(0, 0, 0, 0.2);
}

fig.profile{
  width: 30%;
  float: left;
}
.info{
  width: 70%;
}

fig.profile img{
  width: 90%;
}

footer{
  color: #fff;
  background: #333;
  padding: 20px;
  text-align: center;
}
footer a, footer a:visited{
  color: #999;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}
footer a:hover{
  color: #ccc;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}


.eight.columns{
  margin-bottom: 30px;
}
.name{
  font-size: 30px;
  margin-bottom: 10px;
}
.name .firstname{
  font-weight: 700;
}
.name .lastname{
  font-weight: 100;
}
p.major{
  color: rgba(155, 157, 255, 1);
  font-size: 16px;
  position: relative;
  left: 2px;
  margin-bottom: 5px;
}
p.site{
  position: relative;
  left: 2px;
}

.blank{
  height: 30px;
}

.one-third.column, .two-thirds.column{
  margin-bottom: 30px;
}

/* General class styles
================================================== */
.shadowed {
   -moz-box-shadow:    0px 0px 3px 2px rgba(46, 46, 46, 0.4);
   -webkit-box-shadow: 0px 0px 3px 2px rgba(46, 46, 46, 0.4);
   box-shadow:         0px 0px 3px 2px rgba(46, 46, 46, 0.4);
}

/* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {}

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {}

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {
    .header{
      position: relative;
    }
    .title{
      float: none;
      text-align: center;
      margin-bottom: 10px;
    }
    nav{
      float: none;
      text-align: center;
    }
    nav ul li{
      margin: 0 10px;
      font-size: 14px;
    }
    .back{
      top: 180px;
      position: absolute;
    }
    #motivation{
      padding-top: 100px;
    }
  }

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {}

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {}