
/* five column layout */

.management .textContent{  display:inline-grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, auto);
}
.management .titleContainer {grid-column: 1/6; grid-row:1/2}
.managerWrapper.one {grid-column: 1/2;grid-row:2/3}
.managerWrapper.two {grid-column: 2/3;grid-row:2/3}
.managerWrapper.three {grid-column: 3/4;grid-row:2/3}
.managerWrapper.four {grid-column: 4/5;grid-row:2/3}
.managerWrapper.five {grid-column: 5/6;grid-row:2/3}

/* five column base positioning of bio text.*/

.managerWrapper.one > div > div.wrap-collapsible > div {margin-left:100%;    width:450%; }
.managerWrapper.two > div > div.wrap-collapsible > div {margin-left:-38%;    width:450%;}
.managerWrapper.three > div > div.wrap-collapsible > div {margin-left:-177%;    width:450%;}
.managerWrapper.four > div > div.wrap-collapsible > div {margin-left:-312%;    width:450%;}
.managerWrapper.five > div > div.wrap-collapsible > div {margin-left:-454%;    width:450%;}
.wrap-collapsible > div > div {padding-top:7%;}

@media (max-width:1500px) {
  .management .textContent {
    grid-template-columns: repeat(6, 1fr);
  }
  .managerWrapper.one {grid-column: 1/3; grid-row:2/3}
  .managerWrapper.two {grid-column: 3/5; grid-row:2/3}
  .managerWrapper.three {grid-column: 5/7; grid-row:2/3}
  .managerWrapper.four {grid-column: 1/4; grid-row:3/4}
  .managerWrapper.five {grid-column: 4/7; grid-row:3/4}
  .managerWrapper.one > div > div.wrap-collapsible > div {margin-left:0%;    width:350%; }
  .managerWrapper.two > div > div.wrap-collapsible > div {margin-left:-139%;    width:350%;}
  .managerWrapper.three > div > div.wrap-collapsible > div {margin-left:-280%;   width:350%;}
  .managerWrapper.four > div > div.wrap-collapsible > div {margin-left:0;    width:220%;}
  .managerWrapper.five > div > div.wrap-collapsible > div {margin-left:-139%;    width:220%;}
}
@media (max-width:700px){
  .management .textContent {
    grid-template-columns: repeat(2, 1fr);
  }
  .managerWrapper.one {grid-column: 1/2; grid-row:2/3}
  .managerWrapper.two {grid-column: 2/3; grid-row:2/3}
  .managerWrapper.three {grid-column: 1/2; grid-row:3/4}
  .managerWrapper.four {grid-column: 2/3; grid-row:3/4}
  .managerWrapper.five {grid-column: 1/2; grid-row:4/5}

  .managerWrapper.one > div > div.wrap-collapsible > div {margin-left:0%;    width:220%; }
  .managerWrapper.two > div > div.wrap-collapsible > div {margin-left:-139%;    width:220%;}
  .managerWrapper.three > div > div.wrap-collapsible > div {margin-left:0%;   width:220%;}
  .managerWrapper.four > div > div.wrap-collapsible > div {margin-left:-139%;    width:220%;}
  .managerWrapper.five > div > div.wrap-collapsible > div {margin-left:0%;    width:220%;}
}

@media (max-width:500px){
  .managerWrapper.one {grid-column: 1/3; grid-row:2/3; padding:0;}
  .managerWrapper.two {grid-column: 1/3; grid-row:3/4; padding:0;}
  .managerWrapper.three {grid-column: 1/3; grid-row:4/5; padding:0;}
  .managerWrapper.four {grid-column: 1/3; grid-row:5/6; padding:0;}
  .managerWrapper.five {grid-column: 1/3; grid-row:6/7;padding:0;}

.managerWrapper.one > div > div.wrap-collapsible > div {margin-left:0%;    width:100%;}
.managerWrapper.two > div > div.wrap-collapsible > div{margin-left:0%;    width:100%;}
.managerWrapper.three > div > div.wrap-collapsible > div {margin-left:0%;    width:100%;}
.managerWrapper.four > div > div.wrap-collapsible > div{margin-left:0%;    width:100%;}
.managerWrapper.five > div > div.wrap-collapsible > div {margin-left:0%;    width:100%;}
}
