@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700,300,600,400);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300);
@import url(../font-awesome/css/font-awesome.min.css);

html,body,h1,h2,h3,h4,h5,h6,p{
  border:0;
  font-family:"Open Sans", Helvetica, Arial, sans-serif;
  font-weight:300;
  margin:0;
  padding:0;
}
a{
  color:#c22b34;
  font-weight:400;
  text-decoration:none;
}
body{
  background:url(../images/taroko_gorge.jpg) no-repeat center fixed #f5f5f5;
  background-size:cover;
  color:#eee;
  font-size:1.1em;
  line-height:1.7em;
  padding:10px;
}
.blurb{
  color:#eee;
  font-size:1.3em;
  left:50%;
  line-height:1.4em;
  margin:0 auto;
  position:absolute;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  width:76%;
}
.blurb .name{
  color:#ddd;
  display:block;
  float:right;
  font-family:"Open Sans Condensed", "Open Sans", Helvetica, Arial, sans-serif;
  font-size:1em;
  font-weight:600;
  margin-top:20px;
}
.container{
  margin:0 auto;
  max-width:1000px;
  padding:0 3px;
}
.content{
  background:#1f1f1f;
  border:2px solid #c22b34;
  border-radius:10px;
  clear:both;
  min-height:400px;
  opacity:0.85;
  padding:0 15px;
  position:relative;
}
.content p {
  font-size:.95em;
  line-height:1.5em;
  padding:10px 0;
}
nav, footer{
  margin:15px 0;
  text-align:right;
  width:100%;
}
nav { text-align:left;}
nav h1{
  padding-top:7px;
  position:absolute;
}
nav h1 a{
  color:#555;
  float:left;
  margin:0;
  font-size:2em;
  font-variant:small-caps;
  font-weight:400;
  letter-spacing:5px;
  line-height:0;
  position:relative;
}
nav .hat {
  background:url(../images/hat.png) no-repeat 0 0;
  background-size:100%;
  display:block;
  height:20px;
  position:absolute;
  right:18px;
  top:-14px;
  width:20px;
  z-index:2;
}
nav ul, nav li, footer ul, footer li{
  list-style:none;
  margin:0;
  padding:0;
}
nav ul {clear:both;float:left;margin:40px 0 10px;}
nav li, footer li{
  display:inline-block;
  letter-spacing:3px;
}
nav li {display: block;}
nav li a, footer li a{
  color:#333;
  font-size:1.14em;
  font-weight:300;
  padding:8px 0;
  text-decoration:none;
}
footer li a {
  color:#999;
  font-weight:300;
  padding:0 5px;
}
footer a .overlay{
  color:#c22b34;
  display:none;
  font-family:"Open Sans Condensed","Open Sans",Helvetica,Arial,sans-serif;
  font-size:1.1em;
  left:0;
  line-height: 1.1em;
  opacity:0;
  position:absolute;
  text-align:left;
  top:0;
  transition:1s;
  width:100%;
  z-index:2;
}
footer a:hover .overlay {
  opacity:1.0;
}
footer a .underlay {
  transition:1s;
}
footer a:hover .underlay {
  opacity:0;
  transition:1s;
}
footer li a div {display:none;position:relative; }
footer .fa-3x { color:#ddd;display:inline;opacity:0.75; }
footer .fa-lg {
  display:none;
  color:#ddd;
  line-height:.4em;
  opacity:0.75;
  transition:1s;
}
footer li a:hover .fa-lg{color:#c22b34;transition:1s;}
nav li a:hover{
  color:#c22b34;
}
nav li.sel a{
  color:#c22b34;
  font-weight:500;
}
nav li:first-child a,nav li.sel:first-child a,footer li:first-child a{
  padding-left:0;
}
nav li:last-child a,footer li:last-child a{
  padding-right:0;
}
.selfie{
  background:url(../images/waldo.jpg) no-repeat 0 -85px;
  background-size:112%;
  border-radius:50%;
  box-sizing:border-box;
  display:none;
  float:left;
  height:200px;
  margin:-70px 50px 0 -100px;
  position:relative;
  transition:1s;
  width:200px;
  shape-outside:border-box circle(50%);
  -webkit-shape-outside:border-box circle(50%);
  shape-margin:30px;
  -webkit-shape-margin:30px;
}
.selfie:hover{
  -webkit-transform:rotate(-180deg);
  transform:rotate(-180deg);
  transition:1s;
}
.selfie a{
  display:block;
  height:100%;
  width:100%;
}
.swap-image{
  margin:25px auto;
  position:relative;
  text-align:center;
  min-height:80px;
  max-width:160px;
}
.swap-image .image-top,.swap-image .image-bot{
  height:auto;
  opacity:0;
  position:absolute;
  transition:1.5s;
  width:100%;
}
.swap-image .image-top{
  opacity:1;
  transition:1.5s;
  z-index:2;
}
.swap-image:hover .image-top{
  opacity:0;
  transition:1.5s;
}
.swap-image:hover .image-bot{
  opacity:1;
  transition:1.5s;
}
.text-right{float:right;text-align:right;}
.text-left{float:left;text-align:left;}
.work-samples{
  display:block;
  height:auto;
  width:100%;
}
.work-samples ul,.work-samples ul lh,.work-samples ul li{
  display:block;
  height:auto;
  list-style:none;
  margin:0;
  padding:0;
}
.work-samples ul{
  display:inline-block;
  margin:20px 0;
}
.work-samples ul li{
  display:block;
  margin:0;
  text-align:center;
  width:100%;
}
.work-samples ul li .logo{
  border:0;
  border-radius:10px;
  filter:saturate(25%);
  -webkit-filter:saturate(20%);
  opacity:.8;
  transition:1s;
  width:160px;
}
.work-samples ul li:hover .logo,.work-samples ul li:focus .logo{
  filter:saturate(100%);
  -webkit-filter:saturate(100%);
  opacity:1;
  transition:1s;
}
.work-samples .details{
  display:block;
  float:left;
  font-size:.9em;
  line-height:1.5em;
  text-align:left;
  width:100%;
}
.work-samples .details .close{
  color:#333;
  float:right;
  padding:0 0 10px 10px;
}

@media (min-width:500px) {
  .blurb {
    font-size:1.8em;
  }
  .container {
    padding:0 10px;
  }
  .content {
    font-size:1.1em;
    min-height:500px;
    padding:20px 40px;
  }
  .logo-list ul li{
    width:32%%;
  }
  nav li {
    display:inline-block;
  }
  nav li a {
    padding:8px 20px;
  }
  nav li.sel a {
    padding:8px 18px;
  }
}

@media (min-width:850px) {
  .container{
    padding:0 60px;
  }
  footer .fa-3x {
    display:none;
  }
  footer .fa-lg {
    display:inline-block;
  }
  footer li a {
    padding:8px 20px;
  }
  footer li a div {
    display:inline;
  }
  footer li a .overlay {
    display:block;
  }
  .logo-list ul li{
    width:24%;
  }
  nav {
    text-align:right;
  }
  nav ul {
    float:none;
    margin:0;
  }
}
@media (min-width:1000px) {
  .logo-list ul li{
    width:19%;
  }
  nav h1 a {
    margin-left:150px;
  }
  nav h1 .hat {
    display:none;
  }
  .selfie{
    display:block;
  }
}