/*
* Stylesheet to inlcude all front end styles of the Team_Management
*/

.position-header {
  width: 100%;
  margin-top: 35px;
  /* text-align: center; */
  border-bottom: 1px solid grey;
}


.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 0px;
}


.portrait-container {
  margin-top: 0px;
  margin-bottom: 10px;
  vertical-align: middle;
  width: 23%;
  padding: 0px;
  margin-left: 1%;
  margin-right: 1%;
  position: relative;
}

.portrait-container img {
  display: block;
}

.portrait-overlay {
  display: flex;
  /* flex-wrap: wrap; */
  align-items: center;
  justify-content: space-evenly;
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

.player-number {
  font-weight: bold;
  margin: 0px 10px;
}

.player-name {
  /* font-weight: bold; */
  /* text-transform: uppercase; */
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 960px) {
  .portrait-container {
    width: 31%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 580px) {
  .portrait-container {
    width: 48%;
  }
}