/*
    CSS for about page
*/
body{
  background-color: #DDDDDD;
  margin: 0%;
}

html, body {
  background-color: rgb(235, 235, 235);
  height: 100%;
  }

  
.page-wrap {
  min-height: 100%;
  margin-bottom: -120px; 
  }
  
.page-wrap:after {
  content: "";
  display: block;
  height: 120px; 
}

/* Styling for the section with two buttons on the top of the page */
.section2{
  display: grid;
  grid-template-areas:'col1 col2';
  text-align: center;
  background-color: white;
}

/* Styling for the orange line */
.row {
  display: grid;
  grid-template-columns: auto auto auto;
 
}

/* Styling for about employee section */
.section3{
  display: grid;
  grid-template-areas:
  'img1 img1 img1 img1 img1 col1'
  'col2 img2 img2 img2 img2 img2'
  'img3 col3 col3 col3 col3 col3';
  text-align: center;
  background-color: #DDDDDD;
  padding-top: 2%;
  padding-bottom: 2%;
}

#keliPara{

  margin-top: 10%;
}

#brucePara{

  margin-top: 10%;
}

#brycePara{
  
  margin-top: 5%;
}

#brycePic{
  border-width: 5%;
  border-color: black;
  border-style: solid;
  width: 50%;
}

#brucePic{
  border-width: 5%;
  border-color: black;
  border-style: solid;
  width: 30%;
}

#keliPic{
  border-width: 5%;
  border-color: black;
  border-style: solid;
  width: 30%;
}

.img1 { 
  grid-area: img1;  
  padding-top: 5%;
}

.img2 { 
  grid-area: img2; 
  padding-top: 5%;
}

.img3 { 
  grid-area: img3; 
  padding-top: 5%;
}

.col1 { 
  grid-area: col1; 
  padding-top: 5%;
}

.col2 { 
  grid-area: col2; 
  padding-top: 5%;
}

.col3 { 
  grid-area: col3;
  padding-top: 5%; 
}


/* Styling for p tags in about employee section */
#empDescription{
  margin-right: 15%;
  margin-left: 15%;
  font-size: 120%;
}

.test{
  display: grid;
grid-template-areas:'header';
text-align: center;
}

/* Styling for the sory about the business section */
.section4{
  grid-template-areas:
  'header'
  'paragraph'
  'pic';
  padding-bottom: 2%;
  margin-left: 7%;
  margin-right: 7%
}

/* Styling for the employee and story buttons */
#filterBtns{
font-size: 150%;
}