/*
body
--header
--home page image and logo
--first title/paragraph section
--flex grid content
--ending section
--responsive content

*/



body {
  padding: 0px;
  margin: 0;
  font: 17px 'Sarabun', sans-serif;
  width: auto;

}

  .main-wrapper {
    width: 100%;
    height: auto;

  }

      /* start header section  START ------------------------------------------------------*/

      a {
        color: #00B7FF;
      }

      ul.header {
        background-color: #00303F;
        margin: 0;
        overflow: hidden;
        border-radius: 0px;
        width: 100%;
        height: 60px;
        padding: 0;
        width: 100%;
        list-style-type: none;

      }

      .menu-items {
        position: relative;
        left: auto;
        right: 18%;
        float: right;
      }

      .header li {
          float: left;
          margin: 0;
      }

      .header li a {
          display: block;
          color: white;
          text-align: center;
          vertical-align: middle;
          padding: 25px 16px;
          text-decoration: none;
          font-family: 'Raleway', sans-serif;
          letter-spacing: 2px;
      }

      .menuButton:hover {
          background-color: #004e66;
      }

      .header li.headerImage {
        float: right;
      }

      .header .headerImage a {
        padding: 0;
      }

      .header .icon {
        display: none;
      }


      /*header section END ---------------------------------------------------------------------*/

    .body-wrapper {
      text-align: center;

    }

      /*home page image and logo START ------------------------------------------------------------*/

      .main-image {
        text-align: center;
        vertical-align: middle;
        color:#FFF;
        width: 100%;
        height: 500px;
        background-image: url("/images/seattle-skyline.jpg");/*url("https://images.pexels.com/photos/944636/pexels-photo-944636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");*/
        top: 0;
        left: 0;
        background-position: center 0;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .main-logo {

        margin-top: 25px;
        width: 230px;
      }

      .logo-title {
        font-family: 'Roboto Slab', serif;
        margin: auto auto;
        padding: 0;
        margin-top: 0;
        font-size: 50px;
        letter-spacing: 4px;
        color: #00303F;
      }

      .logo-text {
        color: #00303F;
        font-size: 25px;
        margin-bottom: 30px;

        margin-top:0;
      }

      /* home page image and logo END -----------------------------------------------------------------------*/

      /* first title/paragraph section START -----------------------------------------------------------------------*/

      .main-intro-content {

        margin-top: 20px;
        width: 100%;
        text-align: center;

      }

      .section-title {
        font-family: 'Roboto Slab', serif;
        margin: auto auto;
        padding: 0;
        font-size: 50px;
        letter-spacing: 4px;
      }

      .main-intro-text {
        font-size: 25px;
        margin-bottom: 30px;

        margin-top:0;
      }

      /* first title/paragraph section END -----------------------------------------------------------------------*/

      /*flex grid content START -------------------------------------------------------------------------------------*/

      .main-content {
        justify-content: center;
        display: flex;
        padding-bottom: 0;
      }

        .main-content-text {
          justify-content: center;
          display: flex;
          text-align: left;
        }

        .main-content-column {
          border-radius: 5px;
          padding: 20px;
          flex-basis: 550px;
          flex-grow: 0;
          padding-top: 0;
          padding-bottom: 0;
          flex-shrink: 0;
          text-align: center;
        }

      .main-content2 {
        justify-content: center;
        display: flex;
        padding-bottom: 0;
      }

        .main-content-column1 {
          border-radius: 5px;
          padding: 0px;
          padding-bottom: 50px;
          flex-basis: 550px;
          flex-grow: 0;
          flex-shrink: 0;
          text-align: center;
        }

      /*flex grid content END ------------------------------------------------------------------------------------------------------------------*/


      /*Home page ending section START ------------------------------------------------------------------------------------------------------------------*/

      .main-title {
        text-align: center;
        font-family: 'Roboto Slab', serif;
      }

      .button {
        background-color: #DCAE1D; /* Green */
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;

        font-family: 'Raleway', sans-serif;
        font-weight: bold;
        letter-spacing: 2px;
      }

      .button1 {
        background-color: #DCAE1D;

        border: 2px solid #DCAE1D;
      }

      .button1:hover {
        background-color: Transparent;
        color: white;
      }

      .button2 {

        margin-top: 20px;
      }

      .button2:hover {
        color:black;
      }

        /*Home page ending section END ------------------------------------------------------------------------------------------------------------------*/

    /* the footer isn't wanted anymore but I'll keep this here in case they change their minds.
      It still has an issue with zooming though. So keep that in mind if this gets used again.
    .main-footer {
      position: relative;
      background-color: #5E778A;
      height: 100px;
      width: 100%;
      bottom: 0;
      font-family: 'Raleway', sans-serif;
      color: white;
    }
    */

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

  body {
    width: 1320px;
  }
}

/* responsive screen adjustments */
@media screen and (max-width: 768px) {
  body {
    width: auto;
  }

  .main-content-column {
    width: 90%;
    margin: 5% 5%;
    padding: 0;
  }

  .main-content-text {
    text-align: center;
  }

  .main-content {
    display: block;
  }

  .main-content-column1 {

    flex-basis: 180px;
  }


  .header .icon {
    display: block;
    text-align: center;
  }

  .header li {
    width: 100%;
  }

  .header li a {
      display: none;
  }
  .menu-items {
    padding: 0;
    position: static;
    left: auto;
    right: auto;
    float: none;
  }

  .aboutButton {
    display: none;
  }

  .logo-item {
    display: none;
  }

  .header.responsive {
    position: relative;
    overflow: visible;
    height: auto;
  }

  .header.responsive a.icon {

  }
  .header.responsive li {
    float: none;
  }

  .header.responsive .menu-items {
    overflow: overlay;
    background-color: #00303F;
  }

  .header.responsive li a {
    float: none;
    display: block;

    text-align: center;
  }
}