* { border:0; padding:0; margin:0; }
*::selection { background: #111; color:#fff; }
html, body { height:100%; font-family:'Open Sans', Tahoma, 'Helvetica Neue', Helvetica, Arial, sans-serif; }
#main { width:1280px; margin:4% auto 0 auto; }


a#dribbble { display:block; width:100%; height:600px; background:url(musho_dribbble_works.jpg) repeat-x 0 0; background-size:cover; -webkit-transition: all 0.5s ease; }
#header a { float:right; display:block; width:40px; height:40px; background:#fff url(dribbble.png) no-repeat center center; margin-left:24px;
-webkit-transition: opacity 0.5s ease; opacity:1; background-size:36px 34px; }
a#link2 { background-image:url(twitter.png); }
a#link3 { background-image:url(behance.png); }
a#link4 { background-image:url(email.png); }
#header a:hover { opacity:0.5; }
a#dribbble:hover { opacity:0.9; }
h1 { height:28px; background:url(musho_logo.png) no-repeat left bottom; margin:0 0 60px 0; padding-top:10px; background-size:90px 28px;  }
h2 { height:120px; background:url(top-clients.png) no-repeat left top; margin:20px 0 0 0; cursor:help; background-size:1280px 106px;  }
h3 { font-size:36px; padding:16px 0 8px 0; font-family:'Playfair Display', Georgia, serif; font-weight:normal; color:#333; }
h1 span, h2 span, a span { display:none; }
.clearer { clear:both; }

ul { width:1280px; list-style:none; margin:24px auto; }
ul li { width:400px; overflow:hidden; list-style:none; float:left; margin:80px 40px 0 0; }
ul li img { width:400px; }
ul li:nth-child(3n) { margin-right:0;  }
ul li p { font-size:13px; line-height:20px; color:#999; padding:16px 32px 0 0;  }
ul li a { color:#111; text-decoration:none; display:block; }
ul li p strong { color:#111; font-weight:normal;  }
ul li p strong::after { content: " \2013"; color:#ccc; }
ul li a:hover {  text-decoration:underline; }


ul li.hero { width:1280px; height:560px; background:no-repeat 0 0; background-size:1280px 560px; margin:0; }
ul li.hero p { width:464px; padding:8px 0 0 120px; font-size:13px;  }
ul li.hero h3 { padding:180px 0 0 119px; }
ul li.hero a { padding-top:8px; }

ul li#circle { background-image:url(hero-screen_circle.jpg); }
ul li#mode { background-image:url(hero-screen_mode.jpg); }
ul li#anymote { background-image:url(hero-screen_anymote.jpg); }


@media only screen and (max-width: 1298px) {
  #main { width:100%; }
  h1 { margin:5% 0 0 5%; }
  h2 { background-size:90%; background-position:top center; }
  #header { margin-right:5%; }
  a#dribbble { height:384px; }

  ul, #main ul li.hero { width:100%; margin:0; }
  #main ul li.hero { height:460px; background-size:cover; }

  ul li.hero p { padding-left:5%; width:392px; }
  ul li.hero h3 { padding-left:5%; padding-top:120px; }

  #main ul li { width:40%; margin:10% 5% 0 5%; }
  ul li img { width:100%; }
  #main ul li:nth-child(odd) { margin-right:0;  }


}

@media only screen and (max-width: 960px) {
  #header a { margin-left:16px; }
  a#dribbble { height:75%; background:url(musho_dribbble_works_mobile.jpg); background-size:cover; background-position: left bottom; }

  ul, #main ul li.hero { width:100%; height:auto; background-size:560px 245px; background-position:bottom right; margin:0; }
  ul li.hero p { width:auto; padding:8px 8% 265px 5%; font-size:14px; line-height:22px;  }
  ul li.hero h3 { padding:10% 0 0 5%; font-size:20px;  }
  h1 { margin:10% 0 0 5%; }
  h2 { display:none;  }

  ul li p { font-size:12px; line-height:18px; padding:8px 0 0 0; letter-spacing:0.025em; }
  ul li p strong { display:block; font-size:14px;  }
  ul li p strong::after { content:""; }

}