title: LESS keeps giving me SyntaxError
body: <p>I use LESS with npm and I keep track of what it is happening through command prompt. I keep getting this error with tells me that <strong>SyntaxError: media definitions require block statements after any features in ...</strong> </p>
  
  <p>Check out the image</p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:400,700,900');
  @import url('https://fonts.googleapis.com/css?family=Raleway:300,500,700,900');
  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,900');
  @import url('https://fonts.googleapis.com/css?family=Oswald:300');
  @montserrat: 'Montserrat', sans-serif;
  @linkFFam: 'Source Sans Pro', sans-serif;
  @oswald: 'Oswald', sans-serif;
  @headFootBg: #1e1e1e;
  @linkColor: #f3f3f3;
  @acccentColor: #fff200;
  
  
  @media only screen and (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
      /* or iPad Air 2 on landscape mode */
      section#hero {
          .title { margin-top: 40px; text-align: center; } 
      section#about {
          article {
              h1 { margin-top: 50px; }
              img { padding-top: 50px; }
              p { width: 50%; margin-top: 50px; }
              .down_arrow { margin: 150px auto 0 auto; }
          }
      }
      section#menu { img { max-width: 70%; } }
      footer.container {
          img.knife { margin-top: -105px; }
          .hide { display: none; }
          footer { ul.foot_nav { margin-right: -10px; } }
      }
  
  }
  
  @media only screen and (max-width:768px) and (orientation: portrait) {
      /* for iPad on portrait mode */
      section#hero { .title { margin-top: 140px; } }
  }
  
  @media only screen and (max-width: 736px) and (min-width: 414px) and (orientation: landscape) {
      /* for iPhone+ landscape mode */
      section#top_header {
          display: none;
      }
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/tdm8K.png" alt="the error message i get"></p>