
    body {
      font-family: 'Proxima Nova','proxima-nova-1','proxima-nova-2', 'Helvetica Neue', Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    section, header {
      display: block;
    }

    #container {
      position: relative;
      width: 900px;
      margin: 10px auto;
    }

    section {
      width: 900px;
      height: 540px;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    #grid {
      width: 900px;
      height: 540px;
      position: absolute;
      display: none;
    }

    #grid div {
      float: left;
      width: 99px;
      height: 59px;
      border-left: 1px solid #DDD;
      border-bottom: 1px solid #DDD;
    }

    #grid .target {
      width: 300px;
      height: 180px;
      background: hsla( 0, 100%, 50%, 0.2 );
      position: absolute;
      left: 300px;
      top: 180px;
    }

    h1, h2, p {
      margin: 0 0 15px;
    }

    section header {
      padding: 0 10px;
    }

    section h2 {
      font-size: 28px;
      line-height: 30px;
    }

    p {
      background: hsla( 0, 0%, 0%, 0.3 );
      height: 15px;
    }

    .w3, .w6 { 
      position: absolute;
      margin: 0 10px;
      padding-top: 15px;
    }

    .w3 { width: 280px; }
    .w3.box { width: 250px; }

    .h3.box { height: 150px; }
    .h3.box .img { line-height: 150px; }

    .h6.box { height: 315px; }
    .h6.box .img { line-height: 315px; }

    .w6 { width: 580px; }
    .w6.box { width: 550px; }

    .x3 { left: 300px; }
    .x6 { left: 600px; }

    .y3 { top: 180px; }
    .y6 { top: 360px; }

    .box {
      padding-top: 0;
      border: 5px solid;
      padding: 10px;
    }

    .img {
      background: hsla( 0, 0%, 0%, 0.3 );
      color: white;
      text-align: center;
      height: 100%;
      font-size: 100px;
    }

    /* nav */

    #nav {
      padding: 0;
      margin: 0 auto 10px;
      overflow: auto;
      width: 880px;
      position: relative;
      z-index: 100;
    }

    #nav li {
      list-style: none;
      float: left;
      font-weight: bold;
    }

    #nav li a {
      text-decoration: none;
      display: block;
      background: #EEF;
      background: hsla( 0, 0%, 90%, 0.85 );
      color: blue;
      padding: 8px 15px;
    }

    #nav li a:hover {
      background: red;
      color: white;
    }
    


    /* Section-specific layout */

    #web-dev h1 {
      font-size: 100px;
      font-weight: 600;
      line-height: 105px;
    }

    #front-end header,
    #css header,
    #css3 header { padding-top: 0;}

    #front-end h1 {
      line-height: 85px;
      font-size: 92px;
    }

    #css header,
    #css3 header { padding: 0;}

    #css h1 {
      font-size: 150px;
      line-height: 180px;
    }

    #css3 h1 {
      font-size: 110px;
      line-height: 105px;
    }

    #transforms h1 {
      font-size: 160px;
      line-height: 180px;
    }

    /* Section colors */

    #web-dev { color: hsl( 0, 90%, 45% ); }
    #web-dev p, #web-dev .img { background: hsla( 0, 90%, 45%, 0.3 ); }

    #front-end { color: hsl( 72, 90%, 40% ); }
    #front-end p, #front-end .img { background: hsla( 72, 90%, 40%, 0.3 ); }

    #css { color: hsl( 144, 90%, 45% ); }
    #css p, #css .img { background: hsla( 144, 90%, 45%, 0.3 ); }

    #css3 { color: hsl( 216, 90%, 45% ); }
    #css3 p, #css3 .img { background: hsla( 216, 90%, 45%, 0.3 ); }

    #transforms { color: hsl( 288, 90%, 45% ); }
    #transforms p, #transforms .img { background: hsla( 288, 90%, 45%, 0.3 ); }

