@media only screen and (min-width: 641px) {
  .contain-to-grid.transparent {
    background: transparent; }

  .contain-to-grid.transparent .top-bar {
    background: transparent; }

  .top-bar-section li:not(.has-form) a:not(.button), .top-bar-section ul li {
    background: transparent; }

  .top-bar-section li.active:not(.has-form) a:not(.button) {
    background: transparent;
    color: #FFFFFF; }

  .top-bar-section li.active:not(.has-form) a:not(.button):hover {
    background: transparent; }

  .top-bar-section li:not(.has-form) a:not(.button):hover {
    background: transparent; } }
@media only screen and (max-width: 1024px) {
  .right-section {
    margin-left: 0; } }
@media only screen and (max-width: 60em) {
  .title-area {
    float: left; } }
@media only screen and (max-width: 640px) {
  .work {
    height: 600px; }

  header ul {
    font-size: 36px; }

  .header-content {
    padding-top: 120px; }
    .header-content img {
      width: 50%; }
    .header-content h1 {
      margin: 60px auto 0; }
    .header-content h1::after {
      width: 40px;
      margin: 60px auto 90px; }

  #works h2 {
    font-size: 48px;
    line-height: 56px; }
  #works a {
    padding: 100px; }
  #works a h2 {
    font-size: 48px;
    line-height: 56px;
  }

  .top-bar {
    height: auto; } }
@media only screen and (max-width: 480px) {
  .right-section {
    padding: 70px 10% 40px 50px; }

  #works h2 {
    font-size: 36px;
    line-height: 46px; }

  .header-content {
    padding-top: 100px; }
    .header-content h1 {
      margin: 60px auto 0; } }