diff --git a/README.md b/README.md
index 8c6cbcf19f..efc613ac23 100644
--- a/README.md
+++ b/README.md
@@ -4,29 +4,29 @@ Fun Bus is a travel agency looking for some help on their website.  They want a
 
 ## Task 1: Set Up The Project With Git
 
-- [ ] Create a forked copy of this project.
-- [ ] Add your team lead as collaborator on Github.
-- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!).
-- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
-- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
-- [ ] Push commits: git push origin `<firstName-lastName>`.
+- [X] Create a forked copy of this project.
+- [X] Add your team lead as collaborator on Github.
+- [X] Clone your OWN version of the repository (Not Lambda's by mistake!).
+- [X] Create a new branch: git checkout -b `<firstName-lastName>`.
+- [X] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
+- [X] Push commits: git push origin `<firstName-lastName>`.
  
 Follow these steps for completing your project.
 
-- [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
-- [ ] Add your team lead as a reviewer on the pull-request
-- [ ] Your team lead will count the project as complete by merging the branch back into master.
+- [X] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
+- [X] Add your team lead as a reviewer on the pull-request
+- [X] Your team lead will count the project as complete by merging the branch back into master.
 
 ## Task 2: Set up your preprocessor
-* [ ] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your team lead for help.
-* [ ] Open your terminal and navigate to your preprocessing project by using the `cd` command
-* [ ] Once in your project's root folder, run the following command `less-watch-compiler less css index.less`
-* [ ] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red` in your `index.less` file.
-* [ ] Once you see the red screen, you can delete that style and you're ready to start on the next task
+* [x] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your team lead for help.
+* [x] Open your terminal and navigate to your preprocessing project by using the `cd` command
+* [x] Once in your project's root folder, run the following command `less-watch-compiler less css index.less`
+* [x] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red` in your `index.less` file.
+* [x] Once you see the red screen, you can delete that style and you're ready to start on the next task
 
 ## Task 3: Import LESS Files
 
-* [ ] Navigate to your `index.less` file. Notice the file is blank.  In order for you to see the styles for this project you must import them in a certain order.  That order is as follows:
+* [X] Navigate to your `index.less` file. Notice the file is blank.  In order for you to see the styles for this project you must import them in a certain order.  That order is as follows:
 
 1. `variables.less`
 2. `mixins.less`
@@ -38,21 +38,21 @@ Follow these steps for completing your project.
 
 
 ## Task 4: Desktop Updates Needed
-* [ ] Review the [desktop design file](design-files/fun-bus-desktop.png).  Notice the navigation, header, and buttons at the bottom of the page are missing.
-* [ ] Navigation: Use the `navigation.less` file for all your navigation styling
-* [ ] Main Header: Use the `home-page.less` file for the header styling.
-* [ ] Buttons: Create a parametric mixin that can create the missing buttons in the design file. Use the `mixins.less` file to create your mixin.
+* [X] Review the [desktop design file](design-files/fun-bus-desktop.png).  Notice the navigation, header, and buttons at the bottom of the page are missing.
+* [X] Navigation: Use the `navigation.less` file for all your navigation styling
+* [X] Main Header: Use the `home-page.less` file for the header styling.
+* [X] Buttons: Create a parametric mixin that can create the missing buttons in the design file. Use the `mixins.less` file to create your mixin.
 
 
 ## Task 5: Mobile Updates Needed
-* [ ] Use escaping to create a variable named `@mobile` that contains this value: `(max-width: 500px)`.  Use the `variables.less` file to house your variables.
-* [ ] Review the [mobile design file](design-files/fun-bus-mobile.png). You will see several design updates that need updating. 
-* [ ] Match the design file at `500px` as well as you can 
+* [X] Use escaping to create a variable named `@mobile` that contains this value: `(max-width: 500px)`.  Use the `variables.less` file to house your variables.
+* [x] Review the [mobile design file](design-files/fun-bus-mobile.png). You will see several design updates that need updating. 
+* [x] Match the design file at `500px` as well as you can 
 
 ## Stretch Goals: 
-* [ ] Create an animation mixin using parametric mixins
-* [ ] Introduce a form with inputs allowing users to select a vacation package and a submit button at the bottom of the page. Introduce inputs for name, email, phone number, and an area for them to leave special instructions. 
-* [ ] Style the site to look good at all sizes, not just desktop and phone
+* [x] Create an animation mixin using parametric mixins
+* [A] Introduce a form with inputs allowing users to select a vacation package and a submit button at the bottom of the page. Introduce inputs for name, email, phone number, and an area for them to leave special instructions. 
+* [A] Style the site to look good at all sizes, not just desktop and phone
 
 
 
diff --git a/css/index.css b/css/index.css
index e764f2b01f..9283b3fef6 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,497 @@
-/* LESS needs to be processed */
\ No newline at end of file
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+* {
+  box-sizing: border-box;
+}
+html {
+  font-size: 62.5%;
+}
+html,
+body {
+  font-family: 'Roboto', sans-serif;
+}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: 'Indie Flower', cursive;
+}
+h1 {
+  font-size: 4rem;
+  margin-right: 32rem;
+}
+h2 {
+  font-size: 3.2rem;
+  padding-bottom: 10px;
+}
+h4 {
+  font-size: 2.5rem;
+  padding-bottom: 10px;
+}
+p {
+  line-height: 1.5;
+  font-size: 1.6rem;
+  padding-bottom: 10px;
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+.container {
+  max-width: 800px;
+  width: 100%;
+  margin: 0 auto;
+}
+body {
+  max-width: 800px;
+  width: 100%;
+  margin: 0 auto;
+}
+body .containernav {
+  display: flex;
+  align-items: flex-end;
+  padding: 5% 0% 2.5% 0%;
+}
+@media (max-width: 500px) {
+  body .containernav {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+  body .containernav .btn {
+    width: 100%;
+  }
+  body .containernav .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
+}
+body .containernav a {
+  text-decoration: none;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 1.5rem;
+}
+@media (max-width: 500px) {
+  intro {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+  intro .btn {
+    width: 100%;
+  }
+  intro .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
+}
+intro h5 {
+  border-bottom: 2px dashed #C0C0C0;
+}
+.footer {
+  width: 100%;
+  border-top: 2px dashed silver;
+  background: #FFEBCD;
+}
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 20px;
+}
+.home .content-section {
+  margin: 30px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+@media (max-width: 500px) {
+  .home .content-section {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+  .home .content-section .btn {
+    width: 100%;
+  }
+  .home .content-section .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
+}
+.home .content-section .text-content {
+  width: 48%;
+  padding-right: 1%;
+}
+@media (max-width: 500px) {
+  .home .content-section .text-content {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+  .home .content-section .text-content .btn {
+    width: 100%;
+  }
+  .home .content-section .text-content .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
+}
+.home .content-section .img-content {
+  width: 48%;
+  padding-left: 1%;
+}
+@media (max-width: 500px) {
+  .home .content-section .img-content {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+  .home .content-section .img-content .btn {
+    width: 100%;
+  }
+  .home .content-section .img-content .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
+}
+.home .content-section .img-content img {
+  border-radius: 10px;
+}
+@media (max-width: 500px) {
+  .home .content-section .img-content img {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+  .home .content-section .img-content img .btn {
+    width: 100%;
+  }
+  .home .content-section .img-content img .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
+}
+.home h5 {
+  border-top: 2px dashed #C0C0C0;
+  margin: 2rem;
+}
+.home .inverse-content {
+  padding-bottom: 30px;
+  border-bottom: 2px dashed #C0C0C0;
+}
+@media (max-width: 500px) {
+  .home .inverse-content {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+  .home .inverse-content .btn {
+    width: 100%;
+  }
+  .home .inverse-content .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
+}
+.home .inverse-content .text-content {
+  padding-left: 1%;
+  padding-right: 0;
+}
+@media (max-width: 500px) {
+  .home .inverse-content .text-content {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+  .home .inverse-content .text-content .btn {
+    width: 100%;
+  }
+  .home .inverse-content .text-content .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
+}
+.home .inverse-content .img-content {
+  padding-right: 1%;
+  padding-left: 0;
+}
+.home .content-destination {
+  width: 75%;
+  margin: 0 auto 30px;
+}
+@media (max-width: 500px) {
+  .home .content-destination {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+  .home .content-destination .btn {
+    width: 100%;
+  }
+  .home .content-destination .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
+}
+.home .content-destination img {
+  border-radius: 10px;
+}
+@media (max-width: 500px) {
+  .home .content-destination img {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+  .home .content-destination img .btn {
+    width: 100%;
+  }
+  .home .content-destination img .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
+}
+.home .content-pick {
+  padding-top: 30px;
+  border-top: 2px dashed #C0C0C0;
+  display: flex;
+  justify-content: space-between;
+}
+@media (max-width: 500px) {
+  .home .content-pick {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+  .home .content-pick .btn {
+    width: 100%;
+  }
+  .home .content-pick .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
+}
+.home .content-pick .destination {
+  width: 30%;
+  margin-bottom: 30px;
+}
+@media (max-width: 500px) {
+  .home .content-pick .destination {
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1rem;
+  }
+  .home .content-pick .destination .btn {
+    width: 100%;
+  }
+  .home .content-pick .destination .btn:hover {
+    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+  }
+}
+.home .content-pick .destination .btn {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  background-color: #008080;
+  border-radius: 15rem 5px;
+  padding: 15px;
+  margin-right: 10rem;
+  font-size: 1.5rem white bold;
+  color: white;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  font-size: 1.8rem;
+}
+.btn:hover {
+  -webkit-animation: fade-in 0.5s linear infinite alternate;
+  -moz-animation: fade-in 0.5s linear infinite alternate;
+  animation: fade-in 0.5s linear infinite alternate;
+}
+@-moz-keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 3;
+  }
+}
+@-webkit-keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 3;
+  }
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 3;
+  }
+}
diff --git a/elizabeth-knoll.txt b/elizabeth-knoll.txt
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/index.html b/index.html
index bb8663b768..ce71f44ad5 100644
--- a/index.html
+++ b/index.html
@@ -15,21 +15,40 @@
 </head>
 
 <body>
+    <div class="containernav">
+      <h1>  Fun Bus  </h1>
+      <div class=" nav ">
+        <nav class="nava">
+          <a href="#">Home</a>
+          <a href="#">About Us</a>
+          <a href="#">Blog</a>
+          <a href="#">Contact</a>
+        </nav>
+      </div>
+    </div>
+    
+  <intro> 
+    <h5></h5>
+      <img src="img/fun-bus.jpg" alt="toy yellow bus background half desert half blue sky">
+
+          <div class="container intro">
+            <h2>Welcome to the Fun Bus</h2>
+            <p> Traveling expedition modern, clean webdesign blogger clean wesite theme websire modern. Design pretty design, travelblogger adventure WordPress wanderlust theme blogger wesite expedition theme travelblogger. Adventure fun traveler pretty design website expedition. </p>
+          </div>
+  </intro>
 
-  
-     
   <div class="container home">
-   
-    <section class="content-section">
-      <div class="text-content">
-        <h2>Let's Go!</h2>
-        <p>Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.</p> 
-        <p>Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website theme.</p>
-      </div>
-      <div class="img-content">
-        <img src="img/adventure.jpg" alt="Let's go on an adventure!">
-      </div>
-    </section>
+    <h5></h5>
+      <section class="content-section">
+        <div class="text-content">
+          <h2>Let's Go!</h2>
+          <p>Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.</p> 
+          <p>Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website theme.</p>
+        </div>
+        <div class="img-content">
+          <img src="img/adventure.jpg" alt="Let's go on an adventure!">
+        </div>
+      </section>
     <section class="content-section inverse-content">
       <div class="img-content">
           <img src="img/fun.jpg" class="img-fluid rounded" alt="Lets have fun!">
diff --git a/less/Animation.less b/less/Animation.less
new file mode 100644
index 0000000000..76576a0b9d
--- /dev/null
+++ b/less/Animation.less
@@ -0,0 +1,10 @@
+.btn:hover {
+	
+	.keyframes(fade-in;{
+		0% { opacity: 0; }
+		100% { opacity: 3; }
+		});
+
+	.animation(fade-in 0.5s linear infinite alternate)
+
+}
\ No newline at end of file
diff --git a/less/global.less b/less/global.less
index abe21bf970..ecf7b546cb 100644
--- a/less/global.less
+++ b/less/global.less
@@ -16,6 +16,7 @@ h1, h2, h3, h4, h5 {
 
 h1 {
   font-size: 4rem;
+  margin-right: 32.0rem;
 }
 
 h2 {
@@ -27,7 +28,6 @@ h4 {
   font-size: 2.5rem;
   padding-bottom: 10px;
 }
-
 p {
   line-height: 1.5;
   font-size: 1.6rem;
diff --git a/less/home-page.less b/less/home-page.less
index 5528d8a7a5..00525a8e41 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,33 +1,57 @@
+
 .home {
 
   .content-section {
+    @media @mobile {
+      .mobile();
+  }
     margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-
-   
     
     .text-content {
+      @media @mobile {
+        .mobile();
+    }
       width: 48%;
       padding-right: 1%;
     }
 
     .img-content {
+      @media @mobile {
+        .mobile();
+    }
+
       width: 48%;
       padding-left: 1%;
 
       img {
+        @media @mobile {
+          .mobile();
+      }
         border-radius: 10px;
       }
     }
   }
 
+  h5 {
+    border-top: 2px dashed @navigation-border;
+    margin: 2.0rem;
+  }
+
+
   .inverse-content {
+    @media @mobile {
+      .mobile();
+  }
     padding-bottom: 30px;
     border-bottom: 2px dashed @navigation-border;
 
     .text-content {
+      @media @mobile {
+        .mobile();
+    }
       padding-left: 1%;
       padding-right: 0;
     }
@@ -39,23 +63,44 @@
   }
 
   .content-destination {
+    @media @mobile {
+      .mobile();
+  }
     width: 75%;
     margin: 0 auto 30px;
 
     img {
+      @media @mobile {
+        .mobile();
+    }
       border-radius: 10px;
     }
   }
 
   .content-pick {
+    @media @mobile {
+      .mobile();
+  }
     padding-top: 30px;
     border-top: 2px dashed @navigation-border;
     display: flex;
     justify-content: space-between;
-
+    
     .destination {
+      @media @mobile {
+        .mobile();
+    }
       width: 30%;
       margin-bottom: 30px;
+      
+
+      .btn {
+        .buttonp(center, center);
+        color: white;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        font-size: 1.8rem;
+ 
+      }
     }
   }
 }// home
\ No newline at end of file
diff --git a/less/index.less b/less/index.less
index c113ca2c46..6b6d6c580f 100644
--- a/less/index.less
+++ b/less/index.less
@@ -1 +1,9 @@
-// Follow the order in the readme
+@import "variables";
+@import "mixins";
+@import "reset";
+@import "global";
+@import "navigation";
+@import "intro";
+@import "footer";
+@import "home-page"; 
+@import "Animation";
\ No newline at end of file
diff --git a/less/intro.less b/less/intro.less
new file mode 100644
index 0000000000..437592f61d
--- /dev/null
+++ b/less/intro.less
@@ -0,0 +1,24 @@
+intro {
+    @media @mobile {
+        .mobile();
+    }
+    h5 {
+        border-bottom: 2px dashed @navigation-border;
+        img {
+            
+            .intro {
+                
+            }
+        }
+    }
+}
+
+  
+
+
+
+// <div class="container intro">
+//   <h2>Welcome to the Fun Bus</h2>
+//   <p> Traveling expedition modern, clean webdesign blogger clean wesite theme websire modern. Design pretty design, travelblogger adventure WordPress wanderlust theme blogger wesite expedition theme travelblogger. Adventure fun traveler pretty design website expedition. </p>
+// </div>
+// </intro>
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 2d5c603558..1d97cb551a 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -1 +1,52 @@
-// Mixins in here
\ No newline at end of file
+// Mixins in here
+.contain() {
+    max-width: 800px;
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  .inversecontent() {
+    padding-bottom: 30px;
+    border-bottom: 2px dashed @navigation-border;
+  }
+
+  // btn add in parametric
+  .buttonp (@j, @t){
+    display: flex;
+    justify-content: @j;
+    text-align: @t;
+    background-color: #008080;
+    border-radius: 15rem 5px;
+    padding: 15px;
+    margin-right:10.0rem;
+    font-size: 1.5rem white bold;
+  }
+
+  .mobile(){
+    display: flex;
+    Flex-flow: row wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    margin: auto;
+    padding: 1.0rem;
+
+    .btn {
+      width:100%;
+    }
+    .btn:hover {
+       background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
+       }
+
+    }
+    .keyframes(@name; @arguments) {
+      @-moz-keyframes @name { @arguments(); }
+      @-webkit-keyframes @name { @arguments(); }
+      @keyframes @name { @arguments(); }
+    }
+    
+    .animation(@arguments) {
+      -webkit-animation: @arguments;
+      -moz-animation: @arguments;
+      animation: @arguments;
+    }
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
index f89120a0f1..52256411d4 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1 +1,19 @@
-// Navigation Styles here
\ No newline at end of file
+body {
+    .contain();
+
+    .containernav {
+        @media @mobile {
+            .mobile();
+        }
+        display:flex;
+        align-items: flex-end;
+        padding: 5% 0% 2.5% 0%;
+
+        a {
+            text-decoration: none;
+            color: @shark;
+            font-size: 1.6rem;           
+            padding: 1.5rem;           
+        }           
+    }
+}    
diff --git a/less/variables.less b/less/variables.less
index 916eb0b7e0..7e4577a1bd 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -11,4 +11,7 @@
 @silver: #C0C0C0;
 @shark: #212529;
 @eastern-blue: #17A2B8;
-@sandy-beach: #FFEBCD;
\ No newline at end of file
+@sandy-beach: #FFEBCD;
+
+// Breakpoints
+@mobile: ~"(max-width: 500px)";