@font-face {
  font-family: 'Homenaje';
  src: url(fonts/Homenaje.ttf);
  font-weight:400;
}

body {
  background-color: #fff;
}
strong{
  font-weight: 700;
}

h1, h2, h3, h4{
  font-family: "Homenaje";
}

.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;
}

.title{
  font-family: "Homenaje";
}
nav ul li{
  display: inline-block;
  margin: 0 30px;
}
.header .title {
  float: left;
}
.header nav {
  float: right;
}
.title{
  font-size: 44px;
  font-family: 'Homenaje', Helvetica, Arial, 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{
  color: #eb5757;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}
nav{
  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.background:hover{
  color: #ff6666;
}
nav a.project:hover{
  color: #16b9b7;
}
nav a.team:hover{
  color: #8275fd;
}

section{
  width: 100%;
  padding: 120px 0;
  color: #fff;

}
#background{
  background-color: #f28674;
  padding-top: 180px;
}
#project{
  background-color: #63bdbc;
}
#team{
  background-color: #7d82b6;
}
body.doc{
  background-color: #58a9d7;
}
#doc{
  padding-top: 50px;
}

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

#project .video{
  width: 100%;
  margin-bottom: 80px;
  height: 620px;
}

.doclink{
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 20px 30px;
  font-size: 26px;
  font-weight: 100;
  text-align: center;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}
.doclink:hover{
  background: rgba(0,0,0,0.7);
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}

#team a, #team a:visited{
  color: #fff;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}
#team a:hover{
  opacity: 0.6;
}


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%;
  border-radius: 50%;
}


#doc h1{
  margin-bottom: 50px;
  line-height: 100%;
}
#doc h2{
  font-size: 40px;
  margin-bottom: 10px;
}
#doc h3{
  font-size: 22px;
  font-family: monospace;
  font-weight: 700;
  margin-bottom: 0;
}
#doc p{
  margin-bottom: 20px;
}
#doc a,#doc a:visited{
  color: #036da9;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}
#doc a:hover{
  color: #014064;
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
}

#doc .subsection{
  margin-bottom: 60px;
}


#doc .apiblock{
  padding: 20px 30px;
  background: rgba(0,0,0,0.2);
  margin-bottom: 20px;
}

.eight.columns{
  margin-bottom: 30px;
}
.name{
  font-size: 30px;
  margin-bottom: 9px;
}
.name .firstname{
  font-weight: 700;
}
.name .lastname{
  font-weight: 100;
}
p.major{
  color: #131c7f;
  font-size: 16px;
  position: relative;
  left: 1px;
  margin-bottom: 0px;
}
p.site{
  position: relative;
  left: 2px;
}

.blank{
  height: 30px;
}

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

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

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {
    body.doc .back{
      top: 20px;
    }
    #doc{
      padding-top: 100px;
    }

    
    .back{
      top: 120px;
      position: absolute;
    }
    #background{
      padding-top: 180px;
    }
    .info {
      margin-bottom: 8px;
    }
    .doclink{
      font-size: 20px;
    }
  }

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {
    #project .video{
      height: 480px;
    }
  }

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

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    #project .video{
      height: 270px;
    }
  }

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {
    #project .video{
      height: 200px;
    }
  }


pre{
  font-size: 12px;
}

/* snippet */
/*---------- rand01 Styles ---------*/
.sh_rand01{background:none; padding:0; margin:0; border:0 none;}.sh_rand01 .sh_sourceCode{background-color:#fff;color:#121b28;font-weight:normal;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_keyword{color:#0a7f6d;font-weight:bold;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_type{color:#c42638;font-weight:bold;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_string{color:#2b83ba;font-weight:normal;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_regexp{color:#2b83ba;font-weight:normal;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_specialchar{color:#a764cb;font-weight:normal;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_comment{color:#ababab;font-weight:normal;font-style:italic;}.sh_rand01 .sh_sourceCode .sh_number{color:#0da344;font-weight:normal;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_preproc{color:#620ac6;font-weight:normal;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_symbol{color:#0000de;font-weight:normal;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_function{color:#000;font-weight:bold;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_cbracket{color:#0000de;font-weight:normal;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_url{color:#2b83ba;font-weight:normal;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_date{color:#0a7f6d;font-weight:bold;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_time{color:#0a7f6d;font-weight:bold;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_file{color:#0a7f6d;font-weight:bold;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_ip{color:#2b83ba;font-weight:normal;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_name{color:#2b83ba;font-weight:normal;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_variable{color:#e12f76;font-weight:bold;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_oldfile{color:#a764cb;font-weight:normal;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_newfile{color:#2b83ba;font-weight:normal;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_difflines{color:#0a7f6d;font-weight:bold;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_selector{color:#e12f76;font-weight:bold;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_property{color:#0a7f6d;font-weight:bold;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_value{color:#2b83ba;font-weight:normal;font-style:normal;}

/*-------- Snippet Base Styles ----------*/
.snippet-wrap {position:relative;}
*:first-child+html .snippet-wrap {display:inline-block;}
* html .snippet-wrap {display:inline-block;}
.snippet-reveal{text-decoration:underline;}
.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:10px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
.snippet-wrap .snippet-hide {top:auto; bottom:10px;}
*:first-child+html .snippet-wrap .snippet-hide {bottom:25px;}
* html .snippet-wrap .snippet-hide {bottom:25px;}
.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:0; padding:0;}
.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:0 5px; text-decoration:underline;}
.snippet-wrap pre.sh_sourceCode{padding:1em;line-height:1.8em;overflow:auto;position:relative;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;}
.snippet-wrap pre.snippet-textonly {padding:2em;}
*:first-child+html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
* html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
.snippet-reveal pre.sh_sourceCode {padding:.5em 1em; text-align:right;}
.snippet-wrap .snippet-num li{padding-left:1.5em;}
.snippet-wrap .snippet-no-num{list-style:none; padding:.6em 1em; margin:0;}
.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
.snippet-wrap .snippet-num {padding-left:3em;}
.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:-3em; padding-left:6px;}
*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
* html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
.snippet-wrap li.box-top {border-width:1px 1px 0 !important;}
.snippet-wrap li.box-bot {border-width:0 1px 1px !important;}
.snippet-wrap li.box-mid {border-width:0 1px !important;}
.snippet-wrap .snippet-num li .box-sp {width:18px; display:inline-block;}
*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:27px;}
* html .snippet-wrap .snippet-num li .box-sp {width:27px;}
.snippet-wrap .snippet-no-num li.box {border:1px solid;}
.snippet-wrap .snippet-no-num li .box-sp {display:none;}