* {
  box-sizing: border-box;}

  body {
    color: #373327;
    font-family: 'Lato', verdana, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    background-color: #F9EFE8;
    margin: 0 auto 0 auto;
    overflow: auto;
    min-width: 1170px;
    /* property: value; */
  }



/* header title and into paragraph */

  header {
    margin-top: 100px;
    margin-left: 180px;
    padding-right: 400px;

  }

  .header-title {
    width: 800px;
    margin: 0 auto;
    line-height: 0px;

  }

  .intro-max-width {
    width: 960px;
    margin: 0 auto;

  }


      p.intro {
        font-size: 20px;
        margin-bottom: 0px;
        margin-left: 10px;
        margin-top: 0px;
        padding-left: 50px;
        padding-bottom: 50px;
        border-left: 3px solid gray;
        border-bottom: 3px solid gray;
        padding-top: 10px;
        width: 980px;
      }

      h2.intro-header {
        color: #373327;
        font-size: 2em;
        font-weight: 400;
        line-height: normal;
        border-left: 3px solid gray;
        padding-left: 50px;
        padding-top: 60px;
        padding-bottom: 10px;
        margin-bottom: 0px;
        margin-top: 0px;
        margin-left: 10px;
      }


/* typography hierarchy */

  h1, h2, h3 {
    font-family: 'Noto Serif', "times new roman", serif;
  }

  h1 {
    color: #373327;
    font-size: 4.5rem;
    font-weight: 400;
    line-height: 5rem;
  }

  h2 {
    color: #373327;
    font-size: 2em;
    font-weight: 400;
    margin-bottom: 0;
  }

  h3 {
    color: #373327;
    font-weight: 400;
    font-size: 1.5em;
    line-height: normal;
    margin-bottom: auto;
  }

  h4 {
    color: white;
    font-weight: 400;
    font-size: 1.2em;
    letter-spacing: 2px;
    padding-bottom: 1px;
  }



/* navigation */

  nav {
    font-size: 20px;
    letter-spacing: 1.3px;
    margin-bottom: 0px;
    padding-top: 0px;
    margin-left: 25px;
  }

  .nav-max-width {
    width: 960px;
    margin: 0 auto;
  }


  nav li {
    display: inline-block;
    list-style:none;
    margin-bottom: 0px;
  }


  nav li a, nav li a:visited {
    border: none;
    padding: 0px;
    width: 70px;
    display: inline-block;
  }


    li {
      color: #E13808;
    }



    /* links */

    a:link, a:visited {
      color: #E13808;
      text-decoration: none;
    }


    a:hover {
      text-decoration: none;
      color: #F19597;


    }


    a:active {
      color: #F19597;
    }


        /* timeline */

        .timeline {
          width: 900px;
          margin: 0 auto;
          padding-left: 10px;
          margin-bottom: 50px;
          position: relative;

        }



/* events */

    #event-1926 h2 {
      color: gold;
      font-size: 1.4em;
      font-weight: 400;
    }


    #event-1926 p.date {
      color: #E2C069;
      border-bottom: 3px solid #E2C069;
    }


    #event-1945 p.date {
      color: #E38478;
      border-bottom: 3px solid #E38478;
    }


    #event-1960 p.date {
      color: #F8A28D;
      border-bottom: 3px solid #F8A28D;
    }


    #event-1972 p.date {
      color: #58BF8F;
      border-bottom: 3px solid #58BF8F;
    }


    #event-1973 p.date {
      color: #FE8BBA;
      border-bottom: 3px solid #FE8BBA;
    }


    #event-1984 p.date {
      color: #9775CA;
      border-bottom: 3px solid #9775CA;
    }


    #event-1999 p.date {
      color: #C5162B;
      border-bottom: 3px solid #C5162B;
    }


    #event-2001 p.date {
      color: #245B92;
      border-bottom: 3px solid #245B92;
    }


    #event-2010 p.date {
      color: #3E4D51;
      border-bottom: 3px solid #3E4D51;
    }

    .event-info {
      padding-top: 50px;
      padding-bottom: 110px;
      padding-right: 15px;
      width: 55%;
      float: left;
      position: relative;
    }

    p.date {
      color: #373327;
      font-family: 'Noto Serif', "times new roman", serif;
      font-weight: 700;
      font-size: 1.2em;
    }



/*images*/

    .event-image img{
      width: 80%;
    }


    img.image{
      float: right;
    }


    .event-image {
      width: 45%;
      float: right;
      padding-bottom: 50px;
      padding-top: 50px;
      border-left: 3px solid grey;
    }





/* circle timeline marker images */

    .circle-marker {
      width: 42px;
      position: absolute;
      top: 85px;
      right: -22.5px;

    }

    .circle-marker-intro {
      width: 55px;
      position: absolute;
      top: 355px;
      left: 164px;
      display: inline
    }

    .circle-marker-end {
      width: 42px;
      position: absolute;
      bottom: 30px;
      right: -22.5px;
    }



    /* quote */

    blockquote {
      color: #373327;
      font-family: 'Noto Serif', "times new roman", serif;
      font-size: 1.4em;
      line-height: 1.6em;
      padding-top: 40px;
      padding-bottom: 70px;
    }



    /* back to top button */

    .back-to-top {
      color: #373327;
      font-size: 20px;
      letter-spacing: 2px;
      text-align: center;
      clear: both;
      padding-top: 18px;
      padding-bottom: 0px;
      border: 3px solid #E13808;
      width: 220px;
      height: 79px;
      margin-left: 45%;
      margin-bottom: 60px;
      margin-top: 0px;
      position: relative;
    }



/* footer */

    footer {
      color: white;
      font-size: 15px;
      background-color: #E13808;
      margin: 0px auto 0px auto;
      background-size: 1080px;
      clear: both;
      text-decoration: none;
    }


    .footer-inner {
      width: 900px;
      margin: 0px auto 0px auto;
      text-align: left;
      padding-top: 5px;
      padding-left: 80px;
      padding-bottom: 80px;
      clear: both;
      text-decoration: none;

    }


    footer li a, footer li a:visited {
      color: white;
      text-decoration: none;

    }

    footer li a, footer li a:hover {
      color: #F19597;
      text-decoration: none;

    }