html {
  overflow-y: scroll;
}
a:focus{
  outline: none;
}
header {
  height: 96px;
  margin-top: 20px;
}
header h1 {
  margin-top: 14px;
  line-heithg: 34px;
  font-size: 38.5px;
  margin-bottom: 10px;
}
header h1 a, header h1 a:hover {
  color: #333333;
  text-decoration: none;
}
header h5 {
  color: #666666;
}
.avatar {
  float: right;
  width: 100px;
  background-color: #ffffff;
  margin: 5px 30px -30px 0;
}
.navbar {
  height: 42px;
}
.navbar-inner {
  padding-left: 0px;
}
.affix {
    position: fixed; 
    top: 20px;
}
footer {
  position: fixed;
  width: 100%;
  bottom: 0px;
  line-height: 60px;
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffffff',GradientType=0 ); /* IE6-9 */
}
footer, #foot {
  height: 60px;
}
footer .update {
  float: right;
}
.img-rounded {
  border: 1px solid #DDDDDD;
}

/* CONTACT */
.social {
  display: inline-block;
  width: 48px;
  height: 48px;
  background: url("images/social-media-icons.png");
}
.facebook { background-position: 0px 0px; }
.linkedin { background-position: 0px -48px; }
.googleplus { background-position: -48px -48px; }
#connect {
  margin-top: 25px;
}

/* WORK */
#work-page article {
  margin-top: 15px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #DDDDDD;
  min-height: 140px;
}
#work-page article time {
  float: right;
  margin-right: 15px;
}
#work-page article .logo {
  float: right;
}
#work-page h4 {
  display: inline;
}

/* PORTFOLIO */
#portfolio-page article {
  margin-top: 15px;
  margin-bottom: 15px;
}
#portfolio-page article h4 {
  display: inline-block;
  float: left;
}
#portfolio-page section article h4 {
  display: inline-block;
  float: none;
}
#portfolio-page article h5 {
  clear: both;
  display: inline-block;
  margin-left: 25px;
  padding-left: 25px;
  border-left: 1px solid #DDDDDD;
}
#portfolio-page article time, #portfolio-page section time {
  float: right;
}
#portfolio-page article .tag {
  margin-bottom: 10px;
}
#portfolio-page .detail {
  clear: both;
  overflow: hidden;
  margin-bottom: 10px;
}
#portfolio-page article .read-more {

}
#portfolio-page a.reference {
  margin-left: 20px;
}
#portfolio-page #filter-wrapper {
  border: 1px solid #D4D4D4;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
  padding: 10px;
}
#portfolio-page .filter-block  label {
  float: left;
}
#portfolio-page .filter-block  .tag.lang {margin-left: 80px;}
#portfolio-page .filter-block  .tag.tech {margin-left: 94px;}
#portfolio-page .filter-block  .tag.cap {margin-left: 66px;}
#portfolio-page .tag span
{
  border-radius: 3px 3px 3px 3px;
  background-color: #999999;
  color: #FFFFFF;
  display: inline-block;
  font-size: 11.844px;
  font-weight: bold;
  line-height: 14px;
  padding: 2px 4px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  vertical-align: baseline;
  white-space: nowrap;
  line-height: 20px;
  text-align: left;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 2px 4px 0;
  cursor: pointer;
  white-space: normal;
}
#portfolio-page .tag span.C { background-color: #A2E01B; }
#portfolio-page .tag span.CS { background-color: #E0C91B; }
#portfolio-page .tag span.DX { background-color: #E0981B; }
#portfolio-page .tag span.GL { background-color: #E01B3C; }
#portfolio-page .tag span.GLSL { background-color: #E01B9B; }
#portfolio-page .tag span.HTML { background-color: #BF1BE0; }
#portfolio-page .tag span.JS { background-color: #631BE0; }
#portfolio-page .tag span.JQ { background-color: #631BE0; }
#portfolio-page .tag span.NJS { background-color: #631BE0; }
#portfolio-page .tag span.SC { background-color: #391BE0; }
#portfolio-page .tag span.PHP { background-color: #1B7AE0; }
#portfolio-page .tag span.MySQL { background-color: #1BAFE0; }
#portfolio-page .tag span.JSON { background-color: #1BE0C6; }
#portfolio-page .tag span.CAD { background-color: #2BE01B; }
#portfolio-page .tag span.MISC,
#portfolio-page .tag span.BSC,
#portfolio-page .tag span.MSC,
#portfolio-page .tag span.WORK
 {
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  color: #646464; 
}
#portfolio-page .tag span.HIDE {
  display: none;
}
#portfolio-page .images  {
  text-align: center;
}
#portfolio-page .images img {
  margin-bottom: 15px;
}
#portfolio-page .images iframe { 
}

/* EDUCATION */
#education-page article time {
  float: right;
}
#education-page article h4,
#education-page article h5
{
  display: inline;
  margin-right: 5px;
  margin-bottom: 5px;
}

/* ME */
#me-page .center {
  text-align: center;
}

@media screen and (max-width: 720px) {
  .over720 { display: none; }
}
@media screen and (max-width: 680px) {
  .over680 { display: none; }
}
@media screen and (max-width: 500px) {
  .over500 { display: none; }
  #portfolio-page .filter-block  .tag { margin-left: 0 !important; }
}
@media screen and (max-width: 310px) {
  .over310 { display: none; }
}
@media screen and (max-width: 300px) {
  .over300 { display: none; }
}