@import url('./header.css');
@import url('./footer.css');
@import url('./common-style.css');

.team-page-container .team-section {
  background-color: #B10416;
}

.team-page-container .team-section .playes-container {
  padding: 85px 0px;
}

.team-page-container .team-section .playes-container .team-img img {
    max-width: 96%;
}

.team-page-container .team-section .playes-container .players {
  padding: 45px 45px 0px 45px;
}

.team-page-container .team-section .playes-container .players h2 {
  font-family: 'FbForma-medium';
  font-size: 200%;
  color: #fff;
  margin-bottom: 30px;
}

.team-page-container .team-section .playes-container .players .players-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, 227px);
  grid-row-gap: 50px;
  justify-content: space-between;
}

.team-page-container .team-section .playes-container .players .players-wrapper .player {
  height: 100%;
  position: relative;
}

.team-page-container .team-section .playes-container .players .players-wrapper .player .number {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #F78922;
  position: absolute;
  bottom: 0;
  right: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-page-container .team-section .playes-container .players .players-wrapper .player .profile-pic .number span {
  font-size: 260%;
  color: #fff;
}

.team-page-container .team-section .playes-container .players .players-wrapper .player .profile-pic {
  border-radius: 50%;
  background-repeat: no-repeat;
  height: 227px;
  background-size: 330px;
  background-position-x: -30px;
  position: relative;
}

.team-page-container .team-section .playes-container .players .players-wrapper .player .details {
  text-align: center;
  margin-top: 30px;
  color: #fff;
}

.team-page-container .team-section .playes-container .players .players-wrapper .player .details .name {
  font-size: 120%;
  font-weight: 500;
  margin-bottom: 10px;
}

.player .details div,
.player .details div a,
.player .details div a:link,
.player .details div a:hover,
.player .details div a:visited,
.player .details div a:active,
.player .details .name a,
.player .details .name a:link,
.player .details .name a:hover,
.player .details .name a:visited,
.player .details .name a:active {
    color: #fff;
}

.team-page-container .coach-section {
    background-color: #DCDCDC;
}

.team-page-container .coach-section .coach-container .coaches {
  padding: 50px 50px 70px 50px;
}

.team-page-container .coach-section .coach-container .coaches h2 {
  margin: 0 0 50px 0;
  font-size: 200%;
  font-family: 'FbForma-medium';
  color: #fff; 
}

.team-page-container .coach-section .coach-container .coaches .coach-wrapper {
    display: flex;
    /*grid-template-columns: repeat(2, 227px);
    grid-column-gap: 100px;
    grid-row-gap: 50px;
    */
    justify-content: center;
}

.coach-wrapper .coach {
    display:inline-block;
    margin: 0 50px;
}
.coach-wrapper .coach.assistant-coach {
    margin: 0 25px;
}

.team-page-container .coach-section .coach-container .coaches .coach-wrapper .coach .profile-pic {
    border-radius: 50%;
    background-repeat: no-repeat;
    width: 227px;
    height: 227px;
    background-size: cover;
    position: relative;
}

.team-page-container .coach-section .coach-container .coaches .coach-wrapper .coach .details {
  text-align: center;
  margin-top: 30px;
  color: #fff;
}

.team-page-container .coach-section .coach-container .coaches .coach-wrapper .coach .details .name {
  font-size: 120%;
  font-weight: 500;
  margin-bottom: 10px;
}

.team-page-container .club-section {
  display: flex;
  flex-direction: row;
}

.team-page-container .club-section .key-people-container, .team-page-container .club-section .stadium-container {
  width: 50%;
}

.team-page-container .club-section .key-people-container .key-people {
  padding-right: calc(5vw + 50px);
  padding-top: 50px;
  padding-bottom: 50px;
}

.team-page-container .club-section .key-people-container .key-people .role {
  font-size: 120%;
  line-height: 40px;
}

.team-page-container .club-section .key-people-container .key-people h2, .team-page-container .club-section .stadium-container .stadium h2 {
  font-size: 200%;
  font-family: 'FbForma-medium';
  margin-bottom: 30px;
}

.team-page-container .club-section .stadium-container {
  background-color: #fff;
}

.team-page-container .club-section .stadium-container .stadium {
  padding-right: 100px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.team-page-container .club-section .stadium-container .stadium .stadium-info {
  margin-top: 20px;
}

.team-page-container .club-section .stadium-container .stadium .stadium-info h3 {
  font-family: 'FbForma-medium';
  margin-bottom: 5px;
}

.team-page-container .club-section .stadium-container .stadium .stadium-info .info {
  font-size: 120%;
  line-height: 40px;
}

@media screen and (max-width: 1024px) {
  .team-page-container .team-section .playes-container .players {
    padding: 40px 0px 40px 0px;
  }

  .team-page-container .team-section .playes-container {
    padding: 30px 0px;
  }

  .team-page-container .coach-section .coach-container .coaches {
    padding: 50px 0px;
  }

  .team-page-container .team-section .playes-container .players .players-wrapper {
    grid-column-gap: 40px;
    justify-content: center;
  }

  .team-page-container .coach-section .coach-container .coaches .coach-wrapper {
        display: inline-block;
        justify-content: center;
  }

  .coach-wrapper .coach {
        display: block;
        margin: 25px 0px;
  }
  .coach-wrapper .coach.assistant-coach {
        display: block;
        margin: 25px 0px;
  }

  /*
  .team-page-container .coach-section .coach-container .coaches .coach-wrapper {
    grid-column-gap: 50px;
    grid-template-columns: repeat(auto-fit, 227px);
  }
  */

  .team-page-container .club-section {
    flex-direction: column;
  }

  .team-page-container .club-section .key-people-container, .team-page-container .club-section .stadium-container {
    width: 100%;
  }

  .team-page-container .club-section .key-people-container .key-people {
    padding: 50px 0px 70px 0px;
    max-width: 90vw;
    margin: 0 auto;
  }

  .team-page-container .club-section .stadium-container .stadium {
    padding: 50px 0px 70px 0px;
    max-width: 90vw;
    margin: 0 auto;
  }

  .team-page-container .club-section .stadium-container .stadium .stadium-img {
    display: flex;
    justify-content: center;  
  }

  .team-page-container .club-section .stadium-container .stadium .stadium-img img {
    width: 100%;
  }
}



@media screen and (min-width: 1920px) {
  .team-page-container .team-section .playes-container .players .players-wrapper {
    grid-template-columns: repeat(6, 227px);
  }  
}

/* IE10+ CSS styles */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .team-page-container .coach-section .coach-container .coaches .coach-wrapper {
    display: -ms-grid;
    
  }

  .team-page-container .team-section .playes-container .players .players-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .team-page-container .team-section .playes-container .players .players-wrapper .player {
    width: 227px;
    margin-right: 15px;
    margin-bottom: 50px;
  }
}

/* IE10+ CSS styles in small screens */
@media screen and (max-width: 1024px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .team-page-container .team-section .playes-container .players .players-wrapper {
    justify-content: space-around;
  }
}