/*
=============== 
TeamSite
===============
*/

.team-site .content-wrapper {
    display: flex;
    width: 100vw;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 2rem;
    padding-bottom: 5rem;
    padding-top: 7rem;
  }
  
  .info-area {
    display: flex;
    /* background: var(--clr-secondary); */
    color: white;
    /* border: var(--clr-primary-light) 4px solid; */
    border: var(--clr-secondary) 4px solid;
    box-shadow: 2px 2px 12px black;
    width: 500px;
    padding: 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
  }
  
  .info-text {
    padding-bottom: 1rem;
  }
  
  .insta-btn {
    display: inline;
  }
  
  .team-site h3 {
    text-align: center;
    padding: 0;
    padding-bottom: 0.5rem;
    margin: 0;
  }
  
  .team-site .league-name {
    color: white;
    font-weight: bold;
    font-size: 1.6rem;
    letter-spacing: 0.5rem;
    padding-bottom: 2rem;
  }
  
  .team {
    background: var(--clr-secondary-light);
    display: none;
  }
  
  .team-visible {
    display: block;
  }
  
  .team h1 {
    padding-bottom: 2rem;
    text-align: center;
    margin: 0;
  }
  
  /* .first-row,
  .second-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin: auto;
    margin-top: 2rem;
    max-width: 1100px;
  }
  
  .second-row {
    margin-bottom: 2rem;
  } */
  
  .info-text {
    max-width: 500px;
  }
  
  .stats {
    width: 500px;
  }
  
  .team-site img {
    border-radius: var(--radius);
  }
  
  .img-wrapper {
    position: relative;
    max-width: 1100px;
    /* margin-left: auto;
    margin-right: auto; */
    align-items: center;
    box-shadow: 2px 2px 12px black;
    /* border: var(--clr-primary-light) 4px solid; */
    border: var(--clr-secondary) 4px solid;
    border-radius: var(--radius);
  }
  
  .team-pic {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* .training {
    display: grid;
    grid-template-columns: 0.5fr 0.3fr 0.1fr 0.3fr 3fr;
    max-width: 500px;
    text-align: center;
  } */
  
  .team h2 {
    margin-left: 0;
  }
  
  /* .trainer,
  .training-times {
    margin: ;
    width: 500px;
  } */
  .training-times {
    text-align: center;
    margin-top: 2rem;
    width: 100%;
  }
  
  .training-times h2 {
    text-align: center;
  }
  
  .training {
    margin-top: 1rem;
    padding: 1rem;
    width: 100%;
    color: black;
    background: rgba(255, 255, 255, 0.7);
  }
  
  .begin,
  .end {
    display: inline;
  }
  
  /* .info-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
  } */
  
  .team .fa-instagram {
    cursor: pointer;
    /* padding-right: 2rem; */
    padding-left: 0;
    color: white;
    font-size: 2rem;
    transition: var(--transition);
    text-decoration: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  
  .team .fa-instagram:hover {
    transform: scale(1.1);
    color: var(--clr-primary-light);
  }
  
  .trainer-area {
    margin-top: 2rem;
  }
  
  .offcanvas-body {
    min-height: 100vh;
    background: white;
  }
  
  @media screen and (max-width: 1650px) {
    .info-area {
      width: 1100px;
    }
  }
  
  @media screen and (max-width: 1100px) {
    .team-site .content-wrapper {
      gap: 0rem;
      padding-bottom: 0;
      padding-top: 4.5rem;
    }
  
    .img-wrapper,
    .team-site img,
    .info-area {
      border-radius: 0;
    }
  }
  
  @media screen and (max-width: 550px) {
    .info-text {
      padding: 1rem 2rem;
    }
  
    .btn {
      width: 90%;
    }
  
    .training-times {
      width: 90%;
    }
  }

  /*
=============== 
Successes
===============
*/

.successes {
    display: flex;
    justify-content: center;
    padding-bottom: 2rem;
  }
  
  .season {
    margin: 1rem 0;
  }
  
  .season-name {
    font-size: 4rem;
    color: var(--clr-primary);
  }
  
  .success {
    font-size: 3rem;
  }
  
  @media screen and (max-width: 1300px) {
    .season-name {
      font-size: 3rem;
    }
    .success {
      font-size: 2rem;
    }
  }
  
  @media screen and (max-width: 900px) {
    .season-name {
      font-size: 2rem;
    }
    .success {
      font-size: 1rem;
    }
  }
  @media screen and (max-width: 400px) {
    .season-name {
      font-size: 1.5rem;
    }
    .success {
      font-size: 0.9rem;
    }
  }
  
  /*
  =============== 
  LeagueTable
  ===============
  */
  
  .league-table {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    font-size: 2rem;
  }
  
  thead th {
    text-align: center;
  }
  
  .league-table a {
    font-size: 0.8rem;
    color: gray;
  }
  
  .league-table td {
    padding: 1rem;
  }
  
  .league-table tr {
    color: var(--clr-secondary-light);
  }
  
  .league-table .vly-team {
    color: var(--clr-primary-light);
    font-size: 2.2rem;
  }
  
  .league-table thead {
    font-size: 1.1rem;
  }
  
  small {
    font-size: 1rem;
  }
  
  @media screen and (max-width: 1200px) {
    .league-table {
      font-size: 1rem;
    }
  
    .league-table .vly-team {
      font-size: 1.2rem;
    }
  }
  
  @media screen and (max-width: 720px) {
    .league-table thead {
      font-size: 1rem;
    }
  
    .league-table .vly-team {
      color: var(--clr-primary-light);
      font-size: 1rem;
    }
  
    .league-table {
      padding: 1rem;
      font-size: 0.9rem;
    }
  
    .league-table td {
      padding: 0.9rem;
    }
  
    h1 {
      font-size: 2.5rem;
    }
  }
  
  @media screen and (max-width: 620px) {
    .league-table thead {
      font-size: 0.9rem;
    }
  
    .league-table .vly-team {
      color: var(--clr-primary-light);
      font-size: 0.9rem;
    }
  
    .league-table {
      padding: 1rem;
      font-size: 0.8rem;
    }
  
    .league-table td {
      padding: 0.8rem;
    }
  
    .league-table a {
      font-size: 0.5rem;
    }
  }
  
  @media screen and (max-width: 530px) {
    .league-table thead {
      font-size: 0.8rem;
    }
  
    .league-table .vly-team {
      color: var(--clr-primary-light);
      font-size: 0.8rem;
    }
  
    .league-table {
      padding: 1rem;
      font-size: 0.7rem;
    }
  
    .league-table td {
      padding: 0.5rem;
    }
  }
  
  @media screen and (max-width: 450px) {
    .league-table thead {
      font-size: 0.7rem;
    }
  
    .league-table .vly-team {
      color: var(--clr-primary-light);
      font-size: 0.7rem;
    }
  
    .league-table {
      padding: 1rem;
      font-size: 0.6rem;
    }
  
    .league-table td {
      padding: 1rem 0.2rem;
    }
  
    .vly-chevron {
      display: block;
      width: 20px;
    }
  }
  
  @media screen and (max-width: 450px) {
    .league-table thead {
      font-size: 0.7rem;
    }
  
    .league-table .vly-team {
      color: var(--clr-primary-light);
      font-size: 0.7rem;
    }
  
    .league-table {
      padding: 1rem;
      font-size: 0.6rem;
    }
  
    .league-table td {
      padding: 1rem 0.2rem;
    }
  
    .vly-chevron {
      display: block;
      width: 20px;
    }
  
    small {
      font-size: 0.5rem;
    }
  }
  
  /*
  =============== 
  GamePlan
  ===============
  */
  
  .game-plan {
    display: flex;
    /* width: 100vh;
    height: 100vh; */
    justify-content: center;
    padding-bottom: 5rem;
  }
  
  .game-plan td {
    padding: 1rem;
  }
  
  @media screen and (max-width: 470px) {
    .game-plan td {
      padding: 0.4rem;
      font-size: 0.7rem;
    }
  }
  
  @media screen and (max-width: 330px) {
    .game-plan td {
      font-size: 0.6rem;
    }
  }