Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Details

Privacy

Go PRO Window blinds lowered to protect code. Code Editor with window blinds (raised) and a light blub turned on.

Keep it secret; keep it safe.

Private Pens are hidden everywhere on CodePen, except to you. You can still share them and other people can see them, they just can't find them through searching or browsing.

Upgrade to PRO

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

Template

Make Template?

Templates are Pens that can be used to start other Pens quickly from the create menu. The new Pen will copy all the code and settings from the template and make a new Pen (that is not a fork). You can view all of your templates, or learn more in the documentation.

Template URL

Any Pen can act as a template (even if you don't flip the toggle above) with a special URL you can use yourself or share with others. Here's this Pen's template URL:

Screenshot

Screenshot or Custom Thumbnail

Screenshots of Pens are shown in mobile browsers, RSS feeds, to users who chose images instead of iframes, and in social media sharing.

This Pen is using the default Screenshot, generated by CodePen. Upgrade to PRO to upload your own thumbnail that will be displayed on previews of this pen throughout the site and when sharing to social media.

Upgrade to PRO

HTML

              
                <body class="blog">
  <div class="container">
    <div class="row override">

      <div class="col-sm-2 sidebar sidefont">


        <img src="Group2.png" alt="" class="normalicon" id="firsticon" style="margin-top: 23px;">


        <ul id="menu">
          <li>
            <img src="Group.png" alt="" class="normalicon greenface">
          </li>
          <li class="x_to_close_window">X</li>
          <a href="index.html" style="text-decoration: none; margin-left: 5%;">
            <li>About</li>
          </a>
          <a href="#" id='portfBtn' style="text-decoration: none;">
            <li>Portfolio</li>
          </a>
            <li>Blog Posts</li>
          <a href="sayhello.html" style="text-decoration: none; cursor: pointer;">
            <li>Contact</li>
          </a>
        </ul>

        <div class="sidebar2 off">
          <nav>
            <h2>Featured Projects</h2>

            <ul class="movablist" style="margin-left: 19%;">
              <li>
                <img src="bar.png" class="bar_for_movable_sidebar">
              </li>
              <li class="movable_options"><a href="asthma.html">Asthma Care</a></li>
              <li class="movable_options"><a href="radio.html">Radio - MusicConnect</a></li>
              <li class="movable_options"><a href="#0">Dignity Meal</a></li>
              <li class="movable_options"><a href="#0">King Kog Bike</a></li>
            </ul>
          </nav>
        </div>
        <!-- end of sidebar2 off -->

      </div>
      <!-- sidebar -->



      <div class="col-sm-10 main-blog-content">
        <div class="container">
          <table>

            <tr class="tablebox">
              <td style="background: url('images/blog/image4.jpeg') no-repeat; background-size: cover; background-color: black; " class="tablebox">


                <div class="blogbackground">

                  <div class="blogheader">
                    <span class="title">Good Market User Research Report</span class="title">



                  </div>
                  <!-- end of blogheader -->

                  <div class="date">
                    Nov 20, 2016

                  </div>




                </div>
                <!-- end of blogbackground -->


              </td>
              <td style="background: url('images/blog/image1.png') no-repeat; background-size: cover; " class="tablebox">


                <div class="blogbackground">

                  <div class="blogheader">
                    <span class="title">Side project - Lineup app case study</span class="title">



                  </div>
                  <!-- end of blogheader -->
                  <div class="date">
                    Nov 20, 2016

                  </div>
                  <!-- end of date -->


                </div>
                <!-- end of blogbackground -->




              </td>
              <td style="background: url('images/blog/image3.jpeg') no-repeat; background-size: cover;" class="tablebox" id="thirdarticle">


                <div class="blogbackground">

                  <div class="blogheader">
                    <span class="title">The Role of Content Strategy in Design Thinking</span class="title">




                  </div>
                  <!-- end of blogheader -->

                  <div class="date">
                    Nov 20, 2016

                  </div>
                  <!-- end of date -->




                </div>
                <!-- end of blogbackground -->





              </td>
            </tr>
            <!-- end of table row -->

            <tr>
              <td style="background: url('images/blog/image5.jpg') no-repeat; background-size: cover; " class="tablebox">

                <div class="blogbackground">

                  <div class="blogheader">
                    <span class="title">A Brief History and Originals of Information Architecture</span class="title">




                  </div>
                  <!-- end of blogheader -->

                  <div class="date">
                    Nov 20, 2016

                  </div>
                  <!-- end of date -->


                </div>
                <!-- end of blogbackground -->



              </td>
              <td style="background: url('images/blog/image2.jpg') no-repeat; background-size: cover; " class="tablebox" id="#lastarticle">

                <div class="blogbackground">

                  <div class="blogheader" id="whiteborder_for_last_article">
                    <span class="title">A General Overview of the Field of UX Design</span class="title">




                  </div>
                  <!-- end of blogheader -->

                  <div class="date" id="date_for_last_article">
                    Nov 20, 2016

                  </div>
                  <!-- end of date -->




                </div>
                <!-- end of blog background -->







              </td>

              <td class="tablebox tdconnect">
                <!-- this is the last td tag after the most recent blog -->
                <img src="images/followmebutton.png" alt="" id="followmebutton">
                <br/>
                <br/>
                <div class="yellowtags">
                  <img src="images/yellowpinterest.png" alt="" class="yellow yellow1">
                  <img src="images/yellowtwitter.png" alt="" class="yellow yellow2">
                </div>
                <!-- end of yellow tags -->


              </td>
              <!-- end of tdconnect -->

            </tr>
            <!-- end of table row -->




          </table>
          <!-- end of table -->



        </div>
        <!-- end of container -->





      </div>
      <!-- main content section -->

    </div>
    <!-- end of row -->

  </div>
  <!-- end of container -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="js/main.js"></script>
  <script src="js/index.js"></script>
  <script src="js/slider.js"></script>
  <script>
    $(function() {
      $('#menu').slicknav();
    })
  </script>


</body>

</html>

              
            
!

CSS

              
                /*!
 * SlickNav Responsive Mobile Menu v1.0.6
 * (c) 2015 Josh Cope
 * licensed under MIT
 */

 body{
   overflow-y: auto;
   overflow-x: hidden;
 }

 a{
   color: black;
 }

 .center{
   text-align: center;
 }

.movable_options{
  font-size: 14px;
  margin-top: 1%;
  margin-left: 11.8%;
}
.mov_side{
  margin-top: -4.3%;
}
.slicknav_btn {
  width: 30px;
  height: 30px;
  position: relative;
  background-image: url('../images/hamburger.png');
  background-size: contain;
  display: block;
  vertical-align: middle;
  float: right;
  padding: 0.438em 0.625em 0.438em 0.625em;
  line-height: 1.125em;
  cursor: pointer;
  }

.slicknav_menu {
  *zoom: 1; }
  .slicknav_menu .slicknav_menutxt {
    display: block;
    line-height: 1.188em;
    float: left; }
  .slicknav_menu .slicknav_icon {
    float: left;
    width: 1.125em;
    height: 0.875em;
    margin: 0.188em 0 0 0.438em; }


  .slicknav_menu:before {
    content: " ";
    display: table; }
  .slicknav_menu:after {
    content: " ";
    display: table;
    clear: both; }

.slicknav_nav {
  clear: both; }
  .slicknav_nav ul {
    display: block; }
  .slicknav_nav li {
    display: block; }
  .slicknav_nav .slicknav_arrow {
    font-size: 0.8em;
    margin: 0 0 0 0.4em; }
  .slicknav_nav .slicknav_item {
    cursor: pointer; }
    .slicknav_nav .slicknav_item a {
      display: inline; }
  .slicknav_nav .slicknav_row {
    display: block; }
  .slicknav_nav a {
    display: block; }
  .slicknav_nav .slicknav_parent-link a {
    display: inline; }

.slicknav_brand {
  float: left; }

.slicknav_menu {
  font-size: 16px;
  box-sizing: border-box;
  background: #4c4c4c;
  padding: 5px; }
  .slicknav_menu * {
    box-sizing: border-box; }
  .slicknav_menu .slicknav_menutxt {
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 3px #000; }
  .slicknav_menu .slicknav_icon-bar {
    background-color: #fff; }

.slicknav_btn {
  margin: 5px 5px 6px;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: #222; }

.slicknav_nav {
  color: #fff;
  margin: 0;
  padding: 0;
  font-size: 0.875em;
  list-style: none;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0, 0.9);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
  .slicknav_nav ul {
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0 0 0 20px; }
  .slicknav_nav .slicknav_row {
    padding: 5px 10px;
    margin: 2px 5px; }
    .slicknav_nav .slicknav_row:hover {
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      color: #fff; }
  .slicknav_nav a {
    padding: 5px 10px;
    margin: 2px 5px;
    text-decoration: none;
    color: #fff; }
    .slicknav_nav a:hover {
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      color: #fff; }
  .slicknav_nav .slicknav_txtnode {
    margin-left: 15px; }
  .slicknav_nav .slicknav_item a {
    padding: 0;
    margin: 0; }
  .slicknav_nav .slicknav_parent-link a {
    padding: 0;
    margin: 0; }

.slicknav_brand {
  color: #fff;
  font-size: 18px;
  line-height: 30px;
  padding: 7px 12px;
  height: 44px; }

  .x_to_close_window{
    display: none;
    text-align: right;
    margin-top: -5%;
    margin-right: 2%;
    font-size: 34px;
    cursor: pointer;
    float: right;
    }
} /* end of 960 resolution */

/* design styles */

.bold {
  font-weight: bold;
}

.light {
  font-weight: lighter;
}

.normalfont {
  font-size: 15px;
}

.normalicon{
  width: 90px;
  margin: 0 auto;
  display: block;
}

.greenface{
  left: 3%;
  top: 52%;
}

/* yellow page only */
#firsticon{
  margin-bottom: 120%;
  margin-left: 14%;
}

.sidefont{
  font-size: 15px;
}

.row{
  height: 100%;
}

.container {
  border: none;
  width: 100%;
  height: 100%;
  margin: 0;
  /* position: absolute;*/
}

.sidebar{
  /*background-color: #F5F5F5;*/
  height: 130%;
  /*border-right: 25px solid white;*/
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: transparent;
}


ul{
  list-style-type: none;
  line-height: 4;
  text-align: center;
  padding: 0;
  margin: 0;
}

ul#menu{
  margin-left: 9%;
  top: 68%;
  display: table;
}

ul a{
  display: table-row;
}

.main-content{
  /*background-color: #fa7376;*/
  background-color: transparent;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

.main-content2{
  text-align: center;
  /*background-color: #fed660;*/
  background-color: transparent;
  font-family: 'Open Sans', sans-serif;
}

#bar {
  width: 70px;
}

.writing{
  color: white;
  padding-top: 54.75px;
}


.at {
  margin-bottom: 140.984px;
  margin-left: 14%;
}

.eye-background{
  width: 255px;
  height: 255px;
  border-radius: 50px;
  color: white;
}

.socialmediaballs{
  max-width: 100%;
}

#ball1, #ball2, #ball3, #ball4 {
  margin: 0 10px 10px;
}

/* media queries */

@media screen and (max-width: 959px){
  body.index{
    background-color: #fa7376;
  }
}

@media screen and (max-width: 767px){
  .sidebar{
    display: none !important;
  }

  body {
    background: #FED660 !important;
  }

  body.index{
    background-color: #fa7376;
  }
  .slicknav_menu{
    background-image: url('../Group2.png'); max-width: 100%;
    background-size: 8%;
    background-repeat: no-repeat;
    background-color: white;
    border-bottom: 10px;
    border-color: white;
    border-style: solid;
  }

  .slicknav_menu li{
    color: #ffffff;
    font-size: 25px;
  }

  .slicknav_btn {
    background-color: white;
  }


#socialmedia{
  margin-left: 15%;
}

} /* end of media query 767px */

@media screen and (min-width: 768px){
  .slicknav_menu{
    display: none;
  }


  #socialmedia {
    list-style-type: none;
    display: inline-block;
    margin-top: 7%;
  }

  #socialmedia li{
    float: left;
    margin-left: 10px;

  }
}

/* this is for the project.html page */

.projectside{
  background-color: #EBEBEB;
  height: 130%;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}

/* adjusted the social media balls */

@media screen and (max-width: 1176px){
  #ball1, #ball2, #ball3, #ball4 {
    max-width: 169px;
  }
}


@media screen and (max-width: 1076px){
  #ball1, #ball2, #ball3, #ball4 {
    max-width: 154px;
  }
}

@media screen and (max-width: 996px){
  #ball1, #ball2, #ball3, #ball4 {
    max-width: 147px;
  }
}

@media screen and (max-width: 980px){
  #ball1, #ball2, #ball3, #ball4 {
    max-width: 137px;
  }
}

@media screen and (max-width: 960px){
  .sidebar{
    display: none !important;
  }

  .slicknav_menu {
    display: block !important;
    background-image: url('../Group2.png');
    max-width: 100%;
    background-size: 7%;
    background-repeat: no-repeat;
    background-color: white;
    border-bottom: 10px;
    border-color: white;
    border-style: solid;
    padding-bottom: 37px;
  }

  .slicknav_btn{
    background-color: white;
  }


  body{
    background: #fa7376 !important;
  }

  body.welcome{
    background: #fff !important;
  }

  body.contactpage {
    background: #FED660 !important;
  }

  body.confirmationpage {
    background: #FED660 !important;
  }

  body.sayhello{
    background: #FED660 !important;
  }

  .x_to_close_window{
    display: block;
  }

  .greenface{
    display: none;
  }

}

@media screen and (max-width: 906px){
  #ball1, #ball2, #ball3, #ball4 {
    max-width: 117px;
  }
}

@media screen and (max-width: 805px){
  #ball1, #ball2, #ball3, #ball4 {
    max-width: 103px;
  }
}

@media screen and (max-width: 765px){
  .slicknav_menu{
    background-size: 7%;
  }
}

@media screen and (max-width: 755px){
  .slicknav_menu{
    background-size: 7%;
  }
}

@media screen and (max-width: 628px){
  .slicknav_menu{
    background-size: 8%;
  }
}

@media (max-width:962px) and (min-width:542px) {
  #ball1, #ball2, #ball3, #ball4 {
    max-width: 108px;
}​

  .slicknav_menu{
    background-size: 9%;
  }

}

@media screen and (max-width: 541px){
  #ball1, #ball2, #ball3, #ball4 {
    max-width: 76px;
  }
}


@media screen and (max-width: 455px){
  .slicknav_menu{
    background-size: 13%;
  }
  #ball1, #ball2, #ball3, #ball4 {
    max-width: 108px;
  }

  .slicknav_menu{
    padding-bottom: 14px;
  }
}

@media screen and (max-width: 392px){
  #left-eye{
    left: 45%;
  }
  #left-eye{
    left: 52.3%;
  }
}

/* end of medial balls */

@media screen and (min-width: 464px){
  .socialmedia1, .socialmedia2 {
    width: 157px;
    display: inline;
  }
}

@media screen and (max-width: 463px){
  .socialmedia1{
  /*  margin: 0px -39px -11px -17px;*/
    width: 152px;
    display: inline-block;
  }
  .socialmedia2{
    width: 152px;
    display: inline-block;
  }

  .socialmedia1 a, .socialmedia2 a {
    margin-top: 10px;
    display: block;
  }
}

.override {
  display: table;
  width: 100%;
}

.override .col-sm-2 {
  display:  table-cell;
}

.socialmediamaster {
  margin: 10% auto;
/*  width: 81%;*/
}

/* THIS CODE IS FOR THE ANIMATED EYES */

.man{
  display: block;
  width: $size;
  height: $size;
  position: relative;
  margin:auto;
  background-repeat: no-repeat;
  background-position:center center;  }

  /* BACKGROUND IMAGE ULR IN BOTTOM OF CSS (BASE64) */


#left-eye,
#right-eye{
    border-radius: 50%;
    display: block;
    position: relative;
    width: 10px; height: 10px;
    top: 158px;
  }
  #left-eye{
    left: 48.2%;
    top: -85px;
  }
  #right-eye{
    left: 50.7%;
    top: -95px;
  }

  #left-pupil,#right-pupil{
    width: 8px; height: 8px;
    background: #595959;
    border-radius: 50%;
    display: block;
    position: absolute;
  }


/* END OF ANIMATED EYES */


body {
  background-image: -webkit-gradient(linear,
    left top,
    right top,
    color-stop(0, #eee),
    color-stop(12%, #F5F5F5),
    color-stop(12%, #F5F5F5),
    color-stop(12%, #fff),
    color-stop(14%, #fff),
    color-stop(14%, #FED660),
    color-stop(100%, #FED660)
	);
}

body.index {
  background-image: -webkit-gradient(linear,
    left top,
    right top,
    color-stop(0, #eee),
    color-stop(12%, #F5F5F5),
    color-stop(12%, #F5F5F5),
    color-stop(12%, #fff),
    color-stop(14%, #fff),
    color-stop(14%, #fa7376),
    color-stop(100%, #fa7376)
	);
}

body.projects {
  background-image: -webkit-gradient(linear,
    left top,
    right top,
    color-stop(0, #eee),
    color-stop(12%, #F5F5F5),
    color-stop(12%, #F5F5F5),
    color-stop(12%, #fff),
    color-stop(14%, #fff),
    color-stop(14%, #EBEBEB),
    color-stop(40%, #EBEBEB),
    color-stop(40%, #433550),
    color-stop(100%, #433550)
	);
}

body.welcome {
  background-image: -webkit-gradient(linear,
    left top,
    right top,
    color-stop(0, #eee),
    color-stop(12%, #F5F5F5),
    color-stop(12%, #F5F5F5),
    color-stop(12%, #fff),
    color-stop(14%, #fff),
    color-stop(14%, #fff),
    color-stop(100%, #fff)
	);
}

body.asthma {
  background-image: -webkit-gradient(linear,
    left top,
    right top,
    color-stop(0, #eee),
    color-stop(12%, #F5F5F5),
    color-stop(12%, #F5F5F5),
    color-stop(12%, #fff),
    color-stop(14%, #fff),
    color-stop(14%, #EBEBEB),
    color-stop(40%, #EBEBEB),
    color-stop(40%, #70c1b3),
    color-stop(100%, #70c1b3)
	);
}

body.radio {
  background-image: -webkit-gradient(linear,
    left top,
    right top,
    color-stop(0, #eee),
    color-stop(12%, #F5F5F5),
    color-stop(12%, #F5F5F5),
    color-stop(12%, #fff),
    color-stop(14%, #fff),
    color-stop(14%, #EBEBEB),
    color-stop(40%, #EBEBEB),
    color-stop(40%, #445f71),
    color-stop(100%, #445f71)
	);
}



.slicknav_icon-bar {
  display: none !important;

}


/* media screen for the eyes only */

@media screen and (max-width: 1112px){
  #right-eye{
    left: 51.1%;
  }
}

@media screen and (max-width: 925px){
  #left-eye{
    left: 47.8%;
  }
  #right-eye{
    left: 51.3%;
  }
}

@media screen and (max-width: 578px){
  #left-eye{
    left: 46.8%;
  }
}

@media screen and (max-width: 431px){
  #left-eye {
    left: 46.9%;
  }
}

/* CSS for the projects page */

/* this is the middle list on the page */

ul.projectlist, .movablist{
  margin-left: 55px;
  text-align: left;
  text-decoration: none;
  list-style-type: none;
  color: black;
}

.movablist{
  margin-left: 19%;
  margin-top: -6%;
}

.movablist.li{
  margin-left: 13%;
}

.movablist:visited{
  color: black;
}
.topbar{
  height: 225px;
  margin: 0 auto;
  background-color: #70c1b3;
}

.middlebar{
  background-color: #445f71;
  height: 225px;
  margin: 0 auto;
  width: 100%
}

.middlemenu{
  width: 23.3333%;
  padding: 0;
  margin-top: 12px;
}

.middlemenu h2{
  margin-top: 13px;
  margin-left: 5.8px;
}


.projects-main{
  padding: 0;
}

.mainimg2{
}

.black{
  color: black;
}

.welcometext{
  width: 274px;
  height: 84px;
  font-size: 23.333333px;
  margin: 0 auto;
}

.projectbutton{
  margin-top: 135px;
}

.greyline{
  display: block;
  margin: 14px auto;
}

/* this is code for the contact form */

.form-field{
  border: 1px solid #dc4653;
  width: 400px;
  height: 42px;
  border-radius: 9px;
  padding: 10px;
  margin: 0 auto;
}

.form-submit{
  float: right;
  right: 41%;
  position: absolute;
  width: 147px;
  border-radius: 10%;
  background: #db747a;
  border-color: #db747a;
}

.form-message{
  height: 156px;
  color: #8E8C8C;
}

.contactmessage{ /* this is the message that is right above the form */
  color: #848282;
}

.specialline{
  background-color: #db747a;
  height: 2px;
  width: 59px;
  position: relative;
  margin: 0 auto;
}

.contact{
  margin: 126px !important;
}

/* media queries for the form */

@media screen and (max-width: 555px){
  .form-field{
    width: 322px;
  }
}

@media screen and (max-width: 477px){
  .form-field{
    width: 257px;
  }
}

@media screen and (max-width: 412px){
  .form-field{
    width: 222px;
  }
}

@media screen and (max-width: 377px){
  .form-field{
    width: 186px;
  }
  .contact>h1{
    font-size: 24px;
  }
}

.thankyoubutton{
  width: 261px;
  margin-top: 105px;
}

.sidebar2 {
  width: 0%;

  background: #EBEBEB;
  position: absolute;
  top: 0;
  left: 84%;
  opacity:0;
  display: table;
  height: 100vh;
  z-index: 12;
}
.sidebar2.off {
  -webkit-animation: slideOut 0.5s forwards;
          animation: slideOut 0.5s forwards;
}
.sidebar2.animation {
  -webkit-animation: slideIn 0.5s forwards;
          animation: slideIn 0.5s forwards;
}
.sidebar2 nav {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.sidebar2 nav h2 {
  margin-top: -88%;
  font-size: 30px;
  margin-left: 6%;

}

/* this goes for the bar that is under the heading in the movable sidebar */
.bar_for_movable_sidebar{
  width: 81px;
  height: 8px;
  margin-left: 11.5%;
  margin-top: -2%;
}

/* the end of the movable sidebar bar */

/* edit this to change the styles of the moving nav bar */
.sidebar2 nav a {
  text-decoration: none;
  list-style-type: none;
}

/* this is for the animation side bar on the main page */

nav h2{
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@-webkit-keyframes slideIn {
  0% {
    width: : 0%;
  opacity: 0;
  }
  100% {
    width: 156.2%;
    opacity: 1;
  }
}
@keyframes slideIn {
  0% {
    width: 0%;
    opacity: 0;
  }
  100% {
      width: 156.2%;
    opacity: 1;
  }
}
@-webkit-keyframes slideOut {
  0% {
      width: 36%;
  }
  100% {
   width: 0%;
  }
}
@keyframes slideOut {
  0% {
      width: 36%;
  }
  100% {
   width: 0%;
  }
}

.slicknav_menu{
  display: none;
}


body {
background-color: #a5d1e8;
}


.center{
  text-align: center;
}

/* icons that are in the side menu */

.normalicon{
  width: 90px;
  margin: 0 auto;
  display: block;
}

.greenface{
  position: fixed;
  left: 3%;
  top: 52%;
}

/* end of icons */

.slicknav_btn {
 width: 30px;
 height: 30px;
 position: relative;
 background-image: url('../images/hamburger.png');
 background-size: contain;
 display: block;
 vertical-align: middle;
 float: right;
 padding: 0.438em 0.625em 0.438em 0.625em;
 line-height: 1.125em;
 cursor: pointer;
 }

.slicknav_menu {
 *zoom: 1; }
 .slicknav_menu .slicknav_menutxt {
   display: block;
   line-height: 1.188em;
   float: left; }
 .slicknav_menu .slicknav_icon {
   float: left;
   width: 1.125em;
   height: 0.875em;
   margin: 0.188em 0 0 0.438em; }


 .slicknav_menu:before {
   content: " ";
   display: table; }
 .slicknav_menu:after {
   content: " ";
   display: table;
   clear: both; }

.slicknav_nav {
 clear: both; }
 .slicknav_nav ul {
   display: block; }
 .slicknav_nav li {
   display: block; }
 .slicknav_nav .slicknav_arrow {
   font-size: 0.8em;
   margin: 0 0 0 0.4em; }
 .slicknav_nav .slicknav_item {
   cursor: pointer; }
   .slicknav_nav .slicknav_item a {
     display: inline; }
 .slicknav_nav .slicknav_row {
   display: block; }
 .slicknav_nav a {
   display: block; }
 .slicknav_nav .slicknav_parent-link a {
   display: inline; }

.slicknav_brand {
 float: left; }

.slicknav_menu {
 font-size: 16px;
 box-sizing: border-box;
 background: #4c4c4c;
 padding: 5px; }
 .slicknav_menu * {
   box-sizing: border-box; }
 .slicknav_menu .slicknav_menutxt {
   color: #fff;
   font-weight: bold;
   text-shadow: 0 1px 3px #000; }
 .slicknav_menu .slicknav_icon-bar {
   background-color: #fff; }

.slicknav_btn {
 margin: 5px 5px 6px;
 text-decoration: none;
 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 background-color: #222; }

.slicknav_nav {
 color: #fff;
 margin: 0;
 padding: 0;
 font-size: 0.875em;
 list-style: none;
 overflow: hidden;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0, 0.4);
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
}
 .slicknav_nav ul {
   list-style: none;
   overflow: hidden;
   padding: 0;
   margin: 0 0 0 20px; }
 .slicknav_nav .slicknav_row {
   padding: 5px 10px;
   margin: 2px 5px; }
   .slicknav_nav .slicknav_row:hover {
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
     border-radius: 6px;
     background: #ccc;
     color: #fff; }
 .slicknav_nav a {
   padding: 5px 10px;
   margin: 2px 5px;
   text-decoration: none;
   color: #fff; }
   .slicknav_nav a:hover {
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
     border-radius: 6px;
     background: #ccc;
     color: #222; }
 .slicknav_nav .slicknav_txtnode {
   margin-left: 15px; }
 .slicknav_nav .slicknav_item a {
   padding: 0;
   margin: 0; }
 .slicknav_nav .slicknav_parent-link a {
   padding: 0;
   margin: 0; }

.slicknav_brand {
 color: #fff;
 font-size: 18px;
 line-height: 30px;
 padding: 7px 12px;
 height: 44px; }


 /* design styles */

 .bold {
   font-weight: bold;
 }

 .light {
   font-weight: lighter;
 }

 .normalfont {
   font-size: 15px;
 }

 .normalicon{
   width: 90px;
   margin: 0 auto;
   display: block;
 }

 .greenface{
   position: fixed;
   left: 3%;
   top: 52%;
 }

 /* yellow page only */
 #firsticon{
   margin-bottom: 120%;
   margin-left: 14%;
 }

 .sidefont{
   font-size: 15px;
 }

 .row{
   height: 100%;
 }

 .container {
   border: none;
   width: 100%;
   height: 100%;
   margin: 36px 35px 45px 45px;
   /* position: absolute;*/
 }

 .sidebar{
   /*background-color: #F5F5F5;*/
   height: 130%;
   /*border-right: 25px solid white;*/
   font-family: 'Open Sans', sans-serif;
   font-weight: bold;
   background-color: transparent;
 }


 ul{
   list-style-type: none;
   line-height: 4;
   text-align: center;
   padding: 0;
   margin: 0;
 }

 ul#menu{
   position: fixed;
   margin-left: 3%;
   top: 68%;
 }

 .main-content{
   /*background-color: #fa7376;*/
   background-color: transparent;
   font-family: 'Open Sans', sans-serif;
   text-align: center;
 }

 .main-content2{
   text-align: center;
   /*background-color: #fed660;*/
   background-color: transparent;
   font-family: 'Open Sans', sans-serif;
 }

 #bar {
   width: 70px;
 }

 .writing{
   color: white;
   padding-top: 54.75px;
 }


 .at {
   margin-bottom: 140.984px;
   margin-left: 14%;
 }

 .slicknav_menu{
   background-image: url('../Group2.png'); max-width: 100%;
   background-size: 8%;
   background-repeat: no-repeat;
   background-color: white;
   border-bottom: 10px;
   border-color: white;
   border-style: solid;
 }

 .slicknav_menu li{
   color: #4d4d4d;
   font-size: 25px;
 }

 .slicknav_btn {
   background-color: white;
 }


#socialmedia{
 margin-left: 15%;
}

}




 #socialmedia {
   list-style-type: none;
   display: inline-block;
   margin-top: 7%;
 }

 #socialmedia li{
   float: left;
   margin-left: 10px;

 }
}






.override {
  display: table;
  width: 100%;
}

.override .col-sm-2 {
  display:  table-cell;
}

.socialmediamaster {
  margin: 10% auto;
/*  width: 81%;*/
}

body {
  background-image: -webkit-gradient(linear,
    left top,
    right top,
    color-stop(0, #eee),
    color-stop(12%, #F5F5F5),
    color-stop(12%, #F5F5F5),
    color-stop(12%, #fff),
    color-stop(14%, #fff),
    color-stop(14%, #a5d1e8),
    color-stop(100%, #a5d1e8)
	);
}


.slicknav_icon-bar {
  display: none !important;

}




@media screen and (max-width: 960px){
  body {
    background-image: -webkit-gradient(linear,
      left top,
      right top,
      color-stop(0, #a5d1e8),
      color-stop(12%, #a5d1e8),
      color-stop(12%, #a5d1e8),
      color-stop(12%, #a5d1e8),
      color-stop(14%, #a5d1e8),
      color-stop(14%, #a5d1e8),
      color-stop(100%, #a5d1e8)
  	);
  } /* end of body */


  .sidebar{
    display: none !important;
  }


  .slicknav_menu {
    display: block !important;
    background-image: url('../Group2.png');
    max-width: 100%;
    background-size: 7%;
    background-repeat: no-repeat;
    background-color: white;
    border-bottom: 10px;
    border-color: white;
    border-style: solid;
    padding-bottom: 37px;
  }

  .slicknav_btn{
    background-color: white;
  }
} /* end of 960 media query*/


/* table styling */

table{
  border-spacing: 47px;
  border-collapse: separate;
}

.tablebox{
  margin: 10px;
  width: 140pt;
  height: 141.2pt;
  position: relative;
}

.blogbackground{
  width: 140pt;
  height: 141.2pt;
  background: rgba(0, 0, 0, 0.5);
 z-index: 1;
}

#followmebutton{
  width: 112pt;
  height: 22pt;
}

/* these last few snippets of code are for the very last column */
.yellow{ /* this is for the yellow social media icons that appear on the blog page */
  width: 26.7pt;
  height: 24.9pt;
  position: relative;
}

.yellow1{
  margin-left: 72px;
}

.tdconnect{
  text-align: right;
}

/* this is the end of the last td tag of the table */

/* this is the actual title of the blog */



.title{
  color: white;
  font-size: 12.5pt;
}

.date{
  color: white;
  position: relative;
  top: 91%;
  left: 51%;
}

.blogheader{
  border: 1px solid white;
  width: 107pt;
  height: 112.2pt;
  margin: 23px 23px 51px 23px;
  position: absolute;
  top: -2%;
  z-index: 2;
}




/* end of table styling */


/* for the side menu */
#firsticon{
  margin-bottom: 120%;
  margin-left: 14%;
}

.sidefont{
  font-size: 15px;
}

.row{
  height: 100%;
}

.container {
  border: none;
  width: 100%;
  height: 100%;
  margin: 0;
  /* position: absolute;*/
}

.sidebar{
  /*background-color: #F5F5F5;*/
  height: 130%;
  /*border-right: 25px solid white;*/
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  background-color: transparent;
}


ul{
  list-style-type: none;
  line-height: 4;
  text-align: center;
  padding: 0;
  margin: 0;
}

ul#menu{
  position: fixed;
  margin-left: 3%;
  top: 68%;
}

.main-content{
  /*background-color: #fa7376;*/
  background-color: transparent;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

.main-content2{
  text-align: center;
  /*background-color: #fed660;*/
  background-color: transparent;
  font-family: 'Open Sans', sans-serif;
}

#bar {
  width: 70px;
}

.writing{
  color: white;
  padding-top: 54.75px;
}


.at {
  margin-bottom: 140.984px;
  margin-left: 14%;
}

/* end of side menu options */

/* THESE ARE THE MEDIA QUERIES FOR THE BLOG */


/* table styling  This establishes a baseline size for the tables */

table{
  border-spacing: 47px;
  border-collapse: separate;
}

.tablebox{
  margin: 10px;
  width: 140pt;
  height: 141.2pt;
}

@media screen and (max-width: 960px){
  body.blog{
    background: #a5d1e8 !important;
  }
}

/* for the table */
@media screen and (max-width: 900px){
td{
    display: block;
    width: 677px;
  }

  .tablebox, .blogbackground{
    margin: 14px;
    width: 215pt;
    height: 176.2pt;
    margin-left: 55%;
  }

  .blogbackground{
    margin-left: 0%;
  }

.blogheader{
  border: 1px solid white;
  width: 181pt;
  height: 142.2pt;
  margin: 23px 23px 51px 23px;
  position: absolute;
  top: -2%;
  z-index: 2;
}

  .date{
    top: 91%;
    left: 67%;
  }


}

@media screen and(max-width: 767px){
  .col-sm-10{
    margin-left: 20% !important;
  }
}

/* 669 */
@media screen and (max-width: 669px){
  .tablebox, .blogbackground{
    margin: 14px;
    width: 215pt;
    height: 176.2pt;
    margin-left: 35%;
  } /* end of table box */

  .blogbackground{
    margin-left: 0%;
  }
} /* end of 669 */

/* 620 */
@media screen and (max-width: 620px){
  .tablebox, .blogbackground{
    margin: -24px;
    width: 215pt;
    height: 176.2pt;
    margin-left: -30%;
    top: -23px;
  } /* end of table box */

  .blogbackground{
    margin-left: 0%;
  }


} /* end of 620 */

@media screen and (max-width: 471px){
  .tablebox, .blogbackground{
    margin: 0px;
    width: 365pt;
    height: 246.2pt;
    margin-left: -19%;
    margin-top: -10%;
  }/* end of table box */

#followmebutton{
  margin-top: 49px;
  float: left;
  padding-left: 18px;
}

.yellowtags{
  margin-left: -14%;
  float: right;
  display: inline;
}
  .blogbackground{
    margin-left: 3%;
    width: 532px;
  }

  .blogheader{
    border: 1px solid white;
    width: 304pt;
    height: 178.2pt;
    margin: 23px 30px 41px 23px;
    position: absolute;
    top: -2%;
    z-index: 2;
    left: 5%;
  }

  .date {
    top: 79%;
    left: 67%;
  }

/* The following two tags will adjust the heights separately of the backgrounds that would otherwise have misshapen heights from the browser changing */
  #thirdarticle{
    height: 287px;
  }

  #lastarticle{
    height: 287px;
  }

#whiteborder_for_last_article{
  height: 207.2pt;
}

#date_for_last_article{
  top: 91%;
  left: 67%;
}

  /*this is the end of the adjusting of the two heights */

} /* end of 471 media query */


/* for the slick nav menu */

@media screen and (min-width: 768px){
 .slicknav_menu{
   display: none;
 }

 @media screen and (max-width: 765px){
   .slicknav_menu{
     background-size: 7%;
   }
 }

 @media screen and (max-width: 755px){
   .slicknav_menu{
     background-size: 7%;
   }
 }

 @media screen and (max-width: 628px){
   .slicknav_menu{
     background-size: 8%;
   }
 }

 @media (max-width:962px) and (min-width:542px) {

   .slicknav_menu{
     background-size: 9%;
   }
 }

 @media screen and (max-width: 455px){
   .slicknav_menu{
     background-size: 13%;
   }

   .slicknav_menu{
     padding-bottom: 14px;
   }
 }

 @media screen and (max-width: 767px){

   body {
     background-image: -webkit-gradient(linear,
       left top,
       right top,
       color-stop(0, #a5d1e8),
       color-stop(12%, #a5d1e8),
       color-stop(12%, #a5d1e8),
       color-stop(12%, #a5d1e8),
       color-stop(14%, #a5d1e8),
       color-stop(14%, #a5d1e8),
       color-stop(100%, #a5d1e8)
   	);
   }


   .sidebar{
     display: none !important;
   }

   .slicknav_menu{
     background-image: url('../Group2.png'); max-width: 100%;
     background-size: 8%;
     background-repeat: no-repeat;
     background-color: white;
     border-bottom: 10px;
     border-color: white;
     border-style: solid;
   }

   .slicknav_menu li{
     color: #4d4d4d;
     font-size: 25px;
   }

   .slicknav_btn {
     background-color: white;
   }


 #socialmedia{
   margin-left: 15%;
 }

 } /* end of media query 767px */


 /* end of slick nav menu */


              
            
!

JS

              
                /*!
 * SlickNav Responsive Mobile Menu v1.0.6
 * (c) 2015 Josh Cope
 * licensed under MIT
 */
;(function ($, document, window) {
    var
    // default settings object.
        defaults = {
            label: '',
            duplicate: true,
            duration: 200,
            easingOpen: 'swing',
            easingClose: 'swing',
            closedSymbol: '&#9658;',
            openedSymbol: '&#9660;',
            prependTo: 'body',
            appendTo: '',
            parentTag: 'a',
            closeOnClick: false,
            allowParentLinks: false,
            nestedParentLinks: true,
            showChildren: false,
            removeIds: false,
            removeClasses: false,
            removeStyles: false,
			brand: '',
            init: function () {},
            beforeOpen: function () {},
            beforeClose: function () {},
            afterOpen: function () {},
            afterClose: function () {}
        },
        mobileMenu = 'slicknav',
        prefix = 'slicknav';

    function Plugin(element, options) {
        this.element = element;

        // jQuery has an extend method which merges the contents of two or
        // more objects, storing the result in the first object. The first object
        // is generally empty as we don't want to alter the default options for
        // future instances of the plugin
        this.settings = $.extend({}, defaults, options);

        this._defaults = defaults;
        this._name = mobileMenu;

        this.init();
    }

    Plugin.prototype.init = function () {
        var $this = this,
            menu = $(this.element),
            settings = this.settings,
            iconClass,
            menuBar;

        // clone menu if needed
        if (settings.duplicate) {
            $this.mobileNav = menu.clone();
            //remove ids from clone to prevent css issues
            $this.mobileNav.removeAttr('id');
            $this.mobileNav.find('*').each(function (i, e) {
                $(e).removeAttr('id');
            });
        } else {
            $this.mobileNav = menu;

            // remove ids if set
            $this.mobileNav.removeAttr('id');
            $this.mobileNav.find('*').each(function (i, e) {
                $(e).removeAttr('id');
            });
        }

        // remove classes if set
        if (settings.removeClasses) {
            $this.mobileNav.removeAttr('class');
            $this.mobileNav.find('*').each(function (i, e) {
                $(e).removeAttr('class');
            });
        }

        // remove styles if set
        if (settings.removeStyles) {
            $this.mobileNav.removeAttr('style');
            $this.mobileNav.find('*').each(function (i, e) {
                $(e).removeAttr('style');
            });
        }

        // styling class for the button
        iconClass = prefix + '_icon';

        if (settings.label === '') {
            iconClass += ' ' + prefix + '_no-text';
        }

        if (settings.parentTag == 'a') {
            settings.parentTag = 'a href="#"';
        }

        // create menu bar
        $this.mobileNav.attr('class', prefix + '_nav');
        menuBar = $('<div class="' + prefix + '_menu"></div>');
		if (settings.brand !== '') {
			var brand = $('<div class="' + prefix + '_brand">'+settings.brand+'</div>');
			$(menuBar).append(brand);
		}
        $this.btn = $(
            ['<' + settings.parentTag + ' aria-haspopup="true" tabindex="0" class="' + prefix + '_btn ' + prefix + '_collapsed">',
                '<span class="' + prefix + '_menutxt">' + settings.label + '</span>',
                '<span class="' + iconClass + '">',
                    '<span class="' + prefix + '_icon-bar"></span>',
                    '<span class="' + prefix + '_icon-bar"></span>',
                    '<span class="' + prefix + '_icon-bar"></span>',
                '</span>',
            '</' + settings.parentTag + '>'
            ].join('')
        );
        $(menuBar).append($this.btn);
        if(settings.appendTo !== '') {
            $(settings.appendTo).append(menuBar);
        } else {
            $(settings.prependTo).prepend(menuBar);
        }
        menuBar.append($this.mobileNav);

        // iterate over structure adding additional structure
        var items = $this.mobileNav.find('li');
        $(items).each(function () {
            var item = $(this),
                data = {};
            data.children = item.children('ul').attr('role', 'menu');
            item.data('menu', data);

            // if a list item has a nested menu
            if (data.children.length > 0) {

                // select all text before the child menu
                // check for anchors

                var a = item.contents(),
                    containsAnchor = false,
                    nodes = [];

                $(a).each(function () {
                    if (!$(this).is('ul')) {
                        nodes.push(this);
                    } else {
                        return false;
                    }

                    if($(this).is("a")) {
                        containsAnchor = true;
                    }
                });

                var wrapElement = $(
                    '<' + settings.parentTag + ' role="menuitem" aria-haspopup="true" tabindex="-1" class="' + prefix + '_item"/>'
                );

                // wrap item text with tag and add classes unless we are separating parent links
                if ((!settings.allowParentLinks || settings.nestedParentLinks) || !containsAnchor) {
                    var $wrap = $(nodes).wrapAll(wrapElement).parent();
                    $wrap.addClass(prefix+'_row');
                } else
                    $(nodes).wrapAll('<span class="'+prefix+'_parent-link '+prefix+'_row"/>').parent();

                if (!settings.showChildren) {
                    item.addClass(prefix+'_collapsed');
                } else {
                    item.addClass(prefix+'_open');
                }

                item.addClass(prefix+'_parent');

                // create parent arrow. wrap with link if parent links and separating
                var arrowElement = $('<span class="'+prefix+'_arrow">'+(settings.showChildren?settings.openedSymbol:settings.closedSymbol)+'</span>');

                if (settings.allowParentLinks && !settings.nestedParentLinks && containsAnchor)
                    arrowElement = arrowElement.wrap(wrapElement).parent();

                //append arrow
                $(nodes).last().after(arrowElement);


            } else if ( item.children().length === 0) {
                 item.addClass(prefix+'_txtnode');
            }

            // accessibility for links
            item.children('a').attr('role', 'menuitem').click(function(event){
                //Ensure that it's not a parent
                if (settings.closeOnClick && !$(event.target).parent().closest('li').hasClass(prefix+'_parent')) {
                        //Emulate menu close if set
                        $($this.btn).click();
                    }
            });

            //also close on click if parent links are set
            if (settings.closeOnClick && settings.allowParentLinks) {
                item.children('a').children('a').click(function (event) {
                    //Emulate menu close
                    $($this.btn).click();
                });

                item.find('.'+prefix+'_parent-link a:not(.'+prefix+'_item)').click(function(event){
                    //Emulate menu close
                        $($this.btn).click();
                });
            }
        });

        // structure is in place, now hide appropriate items
        $(items).each(function () {
            var data = $(this).data('menu');
            if (!settings.showChildren){
                $this._visibilityToggle(data.children, null, false, null, true);
            }
        });

        // finally toggle entire menu
        $this._visibilityToggle($this.mobileNav, null, false, 'init', true);

        // accessibility for menu button
        $this.mobileNav.attr('role','menu');

        // outline prevention when using mouse
        $(document).mousedown(function(){
            $this._outlines(false);
        });

        $(document).keyup(function(){
            $this._outlines(true);
        });

        // menu button click
        $($this.btn).click(function (e) {
            e.preventDefault();
            $this._menuToggle();
        });

        // click on menu parent
        $this.mobileNav.on('click', '.' + prefix + '_item', function (e) {
            e.preventDefault();
            $this._itemClick($(this));
        });

        // check for enter key on menu button and menu parents
        $($this.btn).keydown(function (e) {
            var ev = e || event;
            if(ev.keyCode == 13) {
                e.preventDefault();
                $this._menuToggle();
            }
        });

        $this.mobileNav.on('keydown', '.'+prefix+'_item', function(e) {
            var ev = e || event;
            if(ev.keyCode == 13) {
                e.preventDefault();
                $this._itemClick($(e.target));
            }
        });

        // allow links clickable within parent tags if set
        if (settings.allowParentLinks && settings.nestedParentLinks) {
            $('.'+prefix+'_item a').click(function(e){
                    e.stopImmediatePropagation();
            });
        }
    };

    //toggle menu
    Plugin.prototype._menuToggle = function (el) {
        var $this = this;
        var btn = $this.btn;
        var mobileNav = $this.mobileNav;

        if (btn.hasClass(prefix+'_collapsed')) {
            btn.removeClass(prefix+'_collapsed');
            btn.addClass(prefix+'_open');
        } else {
            btn.removeClass(prefix+'_open');
            btn.addClass(prefix+'_collapsed');
        }
        btn.addClass(prefix+'_animating');
        $this._visibilityToggle(mobileNav, btn.parent(), true, btn);
    };

    // toggle clicked items
    Plugin.prototype._itemClick = function (el) {
        var $this = this;
        var settings = $this.settings;
        var data = el.data('menu');
        if (!data) {
            data = {};
            data.arrow = el.children('.'+prefix+'_arrow');
            data.ul = el.next('ul');
            data.parent = el.parent();
            //Separated parent link structure
            if (data.parent.hasClass(prefix+'_parent-link')) {
                data.parent = el.parent().parent();
                data.ul = el.parent().next('ul');
            }
            el.data('menu', data);
        }
        if (data.parent.hasClass(prefix+'_collapsed')) {
            data.arrow.html(settings.openedSymbol);
            data.parent.removeClass(prefix+'_collapsed');
            data.parent.addClass(prefix+'_open');
            data.parent.addClass(prefix+'_animating');
            $this._visibilityToggle(data.ul, data.parent, true, el);
        } else {
            data.arrow.html(settings.closedSymbol);
            data.parent.addClass(prefix+'_collapsed');
            data.parent.removeClass(prefix+'_open');
            data.parent.addClass(prefix+'_animating');
            $this._visibilityToggle(data.ul, data.parent, true, el);
        }
    };

    // toggle actual visibility and accessibility tags
    Plugin.prototype._visibilityToggle = function(el, parent, animate, trigger, init) {
        var $this = this;
        var settings = $this.settings;
        var items = $this._getActionItems(el);
        var duration = 0;
        if (animate) {
            duration = settings.duration;
        }

        if (el.hasClass(prefix+'_hidden')) {
            el.removeClass(prefix+'_hidden');
             //Fire beforeOpen callback
                if (!init) {
                    settings.beforeOpen(trigger);
                }
            el.slideDown(duration, settings.easingOpen, function(){

                $(trigger).removeClass(prefix+'_animating');
                $(parent).removeClass(prefix+'_animating');

                //Fire afterOpen callback
                if (!init) {
                    settings.afterOpen(trigger);
                }
            });
            el.attr('aria-hidden','false');
            items.attr('tabindex', '0');
            $this._setVisAttr(el, false);
        } else {
            el.addClass(prefix+'_hidden');

            //Fire init or beforeClose callback
            if (!init){
                settings.beforeClose(trigger);
            }

            el.slideUp(duration, this.settings.easingClose, function() {
                el.attr('aria-hidden','true');
                items.attr('tabindex', '-1');
                $this._setVisAttr(el, true);
                el.hide(); //jQuery 1.7 bug fix

                $(trigger).removeClass(prefix+'_animating');
                $(parent).removeClass(prefix+'_animating');

                //Fire init or afterClose callback
                if (!init){
                    settings.afterClose(trigger);
                } else if (trigger == 'init'){
                    settings.init();
                }
            });
        }
    };

    // set attributes of element and children based on visibility
    Plugin.prototype._setVisAttr = function(el, hidden) {
        var $this = this;

        // select all parents that aren't hidden
        var nonHidden = el.children('li').children('ul').not('.'+prefix+'_hidden');

        // iterate over all items setting appropriate tags
        if (!hidden) {
            nonHidden.each(function(){
                var ul = $(this);
                ul.attr('aria-hidden','false');
                var items = $this._getActionItems(ul);
                items.attr('tabindex', '0');
                $this._setVisAttr(ul, hidden);
            });
        } else {
            nonHidden.each(function(){
                var ul = $(this);
                ul.attr('aria-hidden','true');
                var items = $this._getActionItems(ul);
                items.attr('tabindex', '-1');
                $this._setVisAttr(ul, hidden);
            });
        }
    };

    // get all 1st level items that are clickable
    Plugin.prototype._getActionItems = function(el) {
        var data = el.data("menu");
        if (!data) {
            data = {};
            var items = el.children('li');
            var anchors = items.find('a');
            data.links = anchors.add(items.find('.'+prefix+'_item'));
            el.data('menu', data);
        }
        return data.links;
    };

    Plugin.prototype._outlines = function(state) {
        if (!state) {
            $('.'+prefix+'_item, .'+prefix+'_btn').css('outline','none');
        } else {
            $('.'+prefix+'_item, .'+prefix+'_btn').css('outline','');
        }
    };

    Plugin.prototype.toggle = function(){
        var $this = this;
        $this._menuToggle();
    };

    Plugin.prototype.open = function(){
        var $this = this;
        if ($this.btn.hasClass(prefix+'_collapsed')) {
            $this._menuToggle();
        }
    };

    Plugin.prototype.close = function(){
        var $this = this;
        if ($this.btn.hasClass(prefix+'_open')) {
            $this._menuToggle();
        }
    };

    $.fn[mobileMenu] = function ( options ) {
        var args = arguments;

        // Is the first parameter an object (options), or was omitted, instantiate a new instance
        if (options === undefined || typeof options === 'object') {
            return this.each(function () {

                // Only allow the plugin to be instantiated once due to methods
                if (!$.data(this, 'plugin_' + mobileMenu)) {

                    // if it has no instance, create a new one, pass options to our plugin constructor,
                    // and store the plugin instance in the elements jQuery data object.
                    $.data(this, 'plugin_' + mobileMenu, new Plugin( this, options ));
                }
            });

        // If is a string and doesn't start with an underscore or 'init' function, treat this as a call to a public method.
        } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {

            // Cache the method call to make it possible to return a value
            var returns;

            this.each(function () {
                var instance = $.data(this, 'plugin_' + mobileMenu);

                // Tests that there's already a plugin-instance and checks that the requested public method exists
                if (instance instanceof Plugin && typeof instance[options] === 'function') {

                    // Call the method of our plugin instance, and pass it the supplied arguments.
                    returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );
                }
            });

            // If the earlier cached method gives a value back return the value, otherwise return this to preserve chainability.
            return returns !== undefined ? returns : this;
        }
    };
}(jQuery, document, window));

//plugin
var DrawEye = function(eyecontainer, eyepupil, speed, interval){
  var mouseX = 0, mouseY = 0, xp = 0, yp = 0;
  var limitX = $(eyecontainer).width() - $(eyepupil).width(),
      limitY = $(eyecontainer).height() - $(eyepupil).height(),
      offset = $(eyecontainer).offset();

  $(window).mousemove(function(e){
    mouseX = Math.min(e.pageX - offset.left, limitX);
    mouseY = Math.min(e.pageY - offset.top, limitY);
    if (mouseX < 0) mouseX = 0;
    if (mouseY < 0) mouseY = 0;
  });

  var follower = $(eyepupil);
  var loop = setInterval(function(){
    xp += (mouseX - xp) / speed;
    yp += (mouseY - yp) / speed;
    follower.css({left:xp, top:yp});
  }, interval);
};

//create eyes
var eye1 = new DrawEye("#left-eye",  "#left-pupil", 8, 30);
var eye2 = new DrawEye("#right-eye", "#right-pupil", 8, 30);
$(document).ready(function() {
  setTimeout(function(){
    $('.x_to_close_window').on('click',function(){
      $('.slicknav_nav').css('display', 'none');
    });
  },1000);

});

              
            
!
999px
If you get tired, be like an AJAX request and REST.

Console