/*Adjusts font size based on screen size*/
.overlay-text2 {
  left: 50%; 
  padding-top:10%;
  font-size:2rem;
  color: rgb(0, 0, 0);
  font-style: bold;

}
/* Style the navigation menu */
.topnav {
  width: 100%;
  overflow: hidden;
  background-color: rgb(255, 255, 255);;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: rgb(0, 0, 0);
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: rgb(255, 145, 55);
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #b5b5b5;
  color: rgb(255, 255, 255);
}

/* Style the active link (or home/logo) */
.active {
  background-color: #70aec8;
  color: rgb(253, 253, 253);
}



footer{
padding-top: 10%;
width: 100%;

}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  border-right:1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}




.active {
  background-color: #70aec8;
}
@media screen and (max-width: 880px) {
  .header2{
    display:none;
  }
   

  }
  @media screen and (min-width: 880px) {
    header{
      display:none;
    }
     
  
    }
    * {
      box-sizing: border-box;
    }
    
    body {
        font-family:'Calibri', 'Lucida Grande', sans-serif;
        background-image: url("Images/blueGradient.jpg");
        background-size:cover;
        background-repeat: no-repeat;
    }
    
    /* The actual timeline (the vertical ruler) */
    .timeline {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    /* The actual timeline (the vertical ruler) */
    .timeline::after {
      content: '';
      position: absolute;
      width: 6px;
      background-color: white;
      top: 0;
      bottom: 0;
      left: 50%;
      margin-left: -3px;
    }
    
    /* Container around content */
    .container {
      padding: 10px 40px;
      position: relative;
      background-color: inherit;
      width: 50%;
    }
    
    /* The circles on the timeline */
    .container::after {
      content: '';
      position: absolute;
      width: 25px;
      height: 25px;
      right: -17px;
      background-color: white;
      border: 4px solid #FF9F55;
      top: 15px;
      border-radius: 50%;
      z-index: 1;
    }
    
    /* Place the container to the left */
    .left {
      left: 0;
    }
    
    
    /* Place the container to the right */
    .right {
      left: 50%;
    }
    
    /* Add arrows to the left container (pointing right) */
    .left::before {
      content: " ";
      height: 0;
      position: absolute;
      top: 22px;
      width: 0;
      z-index: 1;
      right: 30px;
      border: medium solid white;
      border-width: 10px 0 10px 10px;
      border-color: transparent transparent transparent white;
    }
    
    /* Add arrows to the right container (pointing left) */
    .right::before {
      content: " ";
      height: 0;
      position: absolute;
      top: 22px;
      width: 0;
      z-index: 1;
      left: 30px;
      border: medium solid white;
      border-width: 10px 10px 10px 0;
      border-color: transparent white transparent transparent;
    }
    
    /* Fix the circle for containers on the right side */
    .right::after {
      left: -16px;
    }
    
    /* The actual content */
    .content {
      padding: 20px 30px;
      background-color: white;
      position: relative;
      border-radius: 6px;
    }
    
    /* Media queries - Responsive timeline on screens less than 600px wide */
    @media screen and (max-width: 600px) {
      /* Place the timelime to the left */
      .timeline::after {
      left: 31px;
      }
      
      /* Full-width containers */
      .container {
      width: 100%;
      padding-left: 70px;
      padding-right: 25px;
      }
      
      /* Make sure that all arrows are pointing leftwards */
      .container::before {
      left: 60px;
      border: medium solid white;
      border-width: 10px 10px 10px 0;
      border-color: transparent white transparent transparent;
      }
    
      /* Make sure all circles are at the same spot */
      .left::after, .right::after {
      left: 15px;
      }
      
      /* Make all right containers behave like the left ones */
      .right {
      left: 0%;
      }





      
    }
h1{
  text-align: center;
  color: black;
  font-family:'Calibri', 'Trebuchet MS', sans-serif, 'sans-serif';
  font-size: 200%;
  padding-top: 5%;
  padding-bottom: 5%;

}