html {
    transition: 1s ease;
}
#content {
    transition: 1s ease;
    width: 90%;
    margin-bottom: 10%;
}

hr {
  margin: 10px auto;
  width: 80%;
  float: middle;
}


/*Building content*/

.teamscontainer {
  position: relative;
  margin: auto;
  float: left;
  width: 100%;
  height: 50vh;
  margin-top: 1%;
}
.teams {
  display: flex;
  position: relative;
  margin: auto;
  width: 90%;
  height: auto;
  justify-content: center;
}
.team {
  float: left;
  width: 15%;
}
.team .image {
  background-color: white;
  display: inline-block;
  position: relative;
  border: 4px solid purple;
  width: 8vw;
  height: 8vw;
  overflow: hidden;
  border-radius: 50%;
}
.memberscontainer {
  position: relative;
  transition: 1s ease;
  float: left;
  height: 0%;
  background-color: black;
  width: 100%;
}
.memberscontainer .mc2, .memberscontainer .mc3, .memberscontainer .mc4, .memberscontainer .mc5, .memberscontainer .mc6 {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
    margin-left: 0;
    z-index: 1;
}
.mc1 {   background-color: PALEGREEN; }
.mc1.expandedheight {  height: 30vmax; }
.mc1.expandedwidth{   width: 600%;  z-index: 10; }


.mc2 {   background-color: MEDIUMAQUAMARINE; }
.mc2.expandedheight {  height: 30vmax; }
.mc2.expandedwidth{   width: 600%; margin-left:-100%; z-index: 10;}


.mc3 {   background-color: ROSYBROWN; }
.mc3.expandedheight {  height: 30vmax; }
.mc3.expandedwidth{   width: 600%; margin-left:-200%; z-index: 10;}


.mc4 {   background-color: PLUM; }
.mc4.expandedheight {  height: 30vmax; }
.mc4.expandedwidth{   width: 600%; margin-left:-300%; z-index: 10;}


.mc5 {   background-color: LIGHTSALMON; }
.mc5.expandedheight {  height: 30vmax; }
.mc5.expandedwidth{   width: 600%; margin-left:-400%; z-index: 10;}


.mc6 {   background-color: INDIANRED; }
.mc6.expandedheight {  height: 30vmax; }
.mc6.expandedwidth{   width: 600%; margin-left:-500%; z-index: 10;}

/*
.team1 .image {   border: 4px solid purple; }
.team2 .image {   border: 4px solid blue; }
.team3 .image {   border: 4px solid grey; }
.team4 .image {   border: 4px solid yellow; }
.team5 .image {   border: 4px solid red; }
.team6 .image {   border: 4px solid orange; }
*/

.team .image img {
  margin-left: -17%; /*delete me for default*/
  width: auto;
  height: 90%; /*100*/
}

.mc1.expandedwidth .captains,
.mc2.expandedwidth .captains,
.mc2.expandedwidth .captains,
.mc3.expandedwidth .captains,
.mc4.expandedwidth .captains,
.mc5.expandedwidth .captains,
.mc6.expandedwidth .captains,
.mc1.expandedwidth .children,
.mc2.expandedwidth .children,
.mc2.expandedwidth .children,
.mc3.expandedwidth .children,
.mc4.expandedwidth .children,
.mc5.expandedwidth .children,
.mc6.expandedwidth .children {
  position: relative;
  transition: 2s 1s ease;
  opacity: 1;
}


.memberscontainer .header {
  font-family: 'Lobster Two', Sans-serif;
  font-size: 2vmax;
  width: 100%;
  margin-bottom: 2%;
}

.captains, .children {
  position: absolute;
  opacity: 0;
}
.memberscontainer .member {
  margin: .3vmax;
  float: middle;
  display: inline-block;
  vertical-align: center;
}
.memberscontainer .captains {
  display: block;
  border-right: 1px solid rgba(0,0,0,0.2);
  display: inline-block;
  float: left;
  width: 19%;
}
.memberscontainer .children {
  display: inline-block;
  float: left;
  width: 80%;
}
.member .memberimage {
  width: 8vmax;
  height: 8vmax;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  background-color: #989a8f;;
  overflow: hidden;
}
.member .memberimage img {
  width: auto;
  height: inherit;
  color: #fff;
  text-align: center;
}
.member .membername h3 {
  font-size: 1.1vmax;
}
.member .membername  {
  width: 100%;
}