styles.css

        /*Main types */

      body, html {
        padding: 0;
        margin: 0;
      }

      body {
        font-family: 'Raleway', sans-serif;
        font-family: 'Playfair Display', serif;
      }

      p {
        font-family: 'Raleway', sans-serif;
        font-size: 16px;
        line-height: 26px;
      }

      ul {
        font-family: 'Raleway', sans-serif;
      }

      .a {
        list-style-type: circle;
      }

      .b {
        list-style-type: square;
        content: "\2610";
        margin-right: 5px;
      }

      .c {
        list-style-type: upper-roman;
      }

      ol {
        font-family: 'Raleway', sans-serif;
      }

      li:not(:last-child) {
        margin-bottom: 10px;
        line-height: 18px;
      }

      li {
        line-height: 20px;
      }

      .listtext {}

      .listtext li {
        line-height: 24px;
        font-size: 16px;
      }

      article {
        margin-left: 270px;
        padding: 1px;
        padding-bottom: 200px;
        overflow: hidden;
        font-family: 'Playfair Display', serif;
      }

      header {
        padding: 1em;
        color: white;
        background-color: 000000;
        clear: left;
        text-align: center;
        font-family: 'Raleway', sans-serif;
      }

      footer {
        margin-right: 60px;
        align-content: right;
        align-items: right;
        /*padding: 5px;*/
        padding-right: 160px;
        color: white;
        background-color: #5f9ea0;
        border-top-color: #366;
        text-align: right;
        font-size: 12px;
        position: fixed;
        width: 100%;
        right: 0;
        bottom: 0;
        left: 0;
      }

      h1 {
        font-family: 'Raleway', sans-serif;
        color: #366;
      }

      h2 {
        font-family: 'Raleway', sans-serif;
        font-size: 22px;
      }

      h3 {
        text-decoration: underline;
        font-family: 'Raleway', sans-serif;
        font-weight: lighter;
        font-size: 18px;
      }

      h4 {
        font-style: italic;
        font-size: 10px;
      }

      .content {
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
      }
      /*All nav bar stuff*/

      .navtext {
        font-size: 12px;
        font-family: 'Raleway', Normal;
        color: #5f9ea0
      }

      nav {
        background-color: #dddddd;
        color: white;
        max-width: 225px;
        margin: 0;
        padding: 1em;
        height: 100%;
        position: fixed;
        border-right: 0px solid blue;
      }

      nav ul {
        list-style-type: none;
        padding: 0;
      }

      nav ul a {
        text-decoration: none;
      }

      button {
        cursor: pointer;
        font-family: 'Raleway', Normal;
      }

      .navbutton {
        background-color: #5f9ea0;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        width: 200px;
        margin: 4px 2px;
        border-radius: 25px;
        cursor: pointer;
        font-family: 'Raleway', Normal;
        height: 70px;
      }

      .maincontent {
        width: 80%;
        max-width: 1000px;
        margin: auto
      }

      div.desc {
        padding: 15px;
        text-align: center;
      }

      button.accordion {
        background-color: #ddd;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
      }

      button.accordion.active {
        background-color: #ddd;
      }

      button.accordion:hover {
        background-color: #5f9ea0;
      }

      div.panel {
        padding: 10px 18px;
        display: none;
        background-color: #ddd;
      }
      /*All tables*/

      table {
        font-family: 'Raleway', Normal;
        border-collapse: collapse;
        width: 100%;
      }

      th {
        border: 0px solid #dddddd;
        text-align: right;
        padding: 10px;
      }

      td {
        border: 0px solid #dddddd;
        text-align: left;
        padding: 10px;
        line-height: 20px;
      }

      tr {
        padding: 10px;
      }

      tr:nth-child(even) {
        background-color: #dddddd;
      }

      thead {
        border-bottom: 2px solid #000000;
        text-align: right;
        padding: 10px;
      }

      .headcol {
        position: absolute;
        width: 5em;
        left: 0;
        top: auto;
        border-right: 0px none black;
        border-top-width: 3px;
        /*only relevant for first row*/
        margin-top: -3px;
        /*compensate for top border*/
      }

      .headcol:before {
        content: 'Row ';
      }

      .long {
        background: yellow;
        letter-spacing: 1em;
      }

      .open {
        background-color: #5f9ea0;
        border-color: white;
        border-width: 1px;
        text-align: center;
      }

      .closed {
        background-color: #366;
        border-color: white;
        color: white;
        border-width: 1px;
        text-align: center;
      }

      div.scroll {
        overflow: scroll;
      }

      .schedule {}

      .schedule th {
        width: 92px;
      }

      .wrap {
        width: inherit;
        text-align: center;
        font-size: 0.8em;
      }
      .wrap th{
        text-align: left;
      }
      /*Footer */

      .tablefooter {
        margin-right: 60px;
        margin-top: 0px;
        padding-right: 60px;
      }

      .tablefooter tr {
        margin-right: 60px;
        display: inline-block;
      }
      /*Flex stuff*/

      .flex-container {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        text-align: center;
      }

      .flex-container>* {
        padding: 15px;
        -webkit-flex: 10%;
        flex: 10%;
      }

      .page-table table {}

      .page-table th {
        border: 0px solid black;
        text-align: center;
        padding: 15px;
        vertical-align: text-top;
      }

      .page-table td {
        border: 0px solid black;
        text-align: left;
        padding: 5px;
        vertical-align: text-top;
      }

      .button-table {}

      .table-img {
        padding: 5px;
        max-width: 200px;
        width: 90%
      }

      .table-data {
        width: 100%;
      }

      .table-data th {
        border: 0px solid black;
        text-align: right;
        padding: 5px;
      }

      .table-data td {
        border: 0px solid black;
        text-align: right;
        padding: 10px;
      }

      .table-button td {
        align-items: center;
        align-content: center;
      }

      .table-jobs {}

      .table-jobs th {
        text-align: left;
        border: 2px;
        font-family: sans-serif, Bold;
      }
      /*Button Formating*/

      .tablebutton {
        background-color: #5f9ea0;
        border: none;
        color: white;
        padding: 15px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        border-radius: 25px;
        font-size: 14px;
        width: 150px;
        height: 100px;
        margin: 2px 2px;
        cursor: pointer;
        font-family: 'Raleway', Normal;
        column-width: 250px;
        vertical-align: text-top;
      }

      .footerbutton {
        background-color: #5f9ea0;
        border: solid;
        border-color: white;
        border-width: 2px;
        color: white;
        padding: 5px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        border-radius: 25px;
        font-size: 14px;
        width: 150px;
        height: 54px;
        margin: 4px 2px;
        cursor: pointer;
        font-family: 'Raleway', Normal;
      }

      button:hover {
        background-color: black
      }

      .right {
        float: right;
        margin-left: 10px;
        margin-bottom: 10px;
        border: 5px solid #5f9ea0;
        border-radius: 10px;
      }

      .left {
        float: left;
        border-radius: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        border: 5px solid #5f9ea0;
        padding: 10px;
      }

      .toc {
        background-color: #ddd;
        padding: 10px;
        border-radius: 10px;
      }

      .floating-box {
        float: left;
        width: 200px;
        margin: 10px;
        border-radius: 15px;
        border: 0px;
        font-size: 14px;
        line-height: 18px;
        font-weight: lighter;
        font-family: 'Raleway', Normal;
        background-color: #5f9ea0;
        color: white;
      }

      .floating-box p {
        margin: 3px;
        padding: 5px;
      }

      .imgagegrid {
        display: inline-grid;
        border-radius: 10px;
        margin: 15px;
      }


.article{
  order: 2;
}



      .main-title {
        font-size: 3em;
        color: #366;
        font-family: 'Raleway', Normal;
        padding: 5px;
      }

      .page-title {
        font-size: 200%;
        color: #5f9ea0;
        font-family: 'Raleway', Normal;
      }

      .image-button {
        width: 250px;
        height: 175px;
        border: solid;
        align-items: center;
        border-width: medium;
        border-color: #5f9ea0;
        border-radius: 25px;
      }

      .image-triangle {
        display: block;
        margin: 10px auto;
        max-width: 700px;
        width: 100%;
        align-items: center;
        border: solid;
        border-width: medium;
        border-color: #5f9ea0;
        border-radius: 15px;
      }

      .image-list {
        display: block;
        margin: 10px auto;
        max-width: 500px;
        width: 100%;
        align-items: center;
        border: solid;
        border-width: medium;
        border-color: #5f9ea0;
        border-radius: 15px;
      }

      .transbox {
        width: 250px;
        background-color: #ffffff;
        border-radius: 25px;
        opacity: 0.79;
        filter: alpha(opacity=60);
        /* For IE8 and earlier */
        position: relative;
      }

      .transbox p {
        position: absolute;
        padding: 3px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #366;
        background-color: #dddddd;
        border-radius: 5px;
        border-style: solid;
        border-color: #5f9ea0;
        -webkit-text-stroke-width: 0px;
        -webkit-text-stroke-color: white;
        font-family: 'Playfair Display', black 900;
        font-size: 20px;
      }

      hr {
        border: none;
        height: 3px;
        /* Set the hr color */
        color: #5f9ea0;
        /* old IE */
        background-color: #5f9ea0;
        /* Modern Browsers */
      }

      div.transbox:hover {
        opacity: 0.39;
      }

      .logo {
        width: 85%;
        padding-top: 40px;
        padding-bottom: 40px;
      }

      @media (max-width: 768px) {
          nav {
              position: static;
              max-width: 100%;
          }

          .logo {
              width: 240px;
              padding: 10px;
              margin: auto;
          }

          article {
              margin-left: auto;
          }

          #overlay {
              border: 1px solid black;
              width: 200px;
              height: 200px;
              display: inline-block;
              background-image: url('http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg');
              background-repeat: no-repeat;
          }
      }