:root {
  --plyr-color-main: var(--orange);
}

body {

	color:white;
  background-color:#0E0D1F;
  background-size:cover;
  background-position:center ;
}

body h1 {
	font-weight:800 !important;
  font-size:40px;
}

body h2 {
	color: var(--orange);
	font-weight:800;
	font-size:30px;
	margin-top:50px;
  padding-bottom:15px;
  text-transform:uppercase;
}

p {
  font-size:20px;
  font-weight:500;
}
p b {
  font-weight:700;
}
ul {
	padding-left:20px;
  font-size:20px;
  font-weight:500;
}
ul li {
  position:relative;
  padding-left:10px;
  padding-bottom:10px;
}
ul li::marker {
  opacity:0;
  color:transparent;
}
ul li i {
  color:var(--orange);
  position:absolute;
  left:-20px;
  top:3px;
  font-size:23px;
}
.nav-bar {
	background:black;
  box-shadow:none;
}

.nav-bar .logo {
	background-image: url('../../img/logo-op-zwart.png');
  margin-top:-10px;
}

.oranje {
	color: var(--orange);
}

main {
  padding:150px 0px;
}
  main h1 {
    font-weight:bold;
    text-transform:uppercase;
  }

form {
  margin-top:10px;
}

.form-control {
  border-radius:0;
  background-color:#f7f7f7;
  border:0;
}

#gdprc_bar {
  display:none !important;
}

.wpcf7-response-output {
	background:transparent;
}

.button.wpcf7-submit {
  background:var(--orange);
  color:white !important;
}
label input {
  margin-top:5px;
}



/* Pitch */
#pitch {
  background-image:url('../../img/wk-actie-2026/stadium.jpg');
  background-size:cover;
  background-position:center bottom;
  box-shadow:inset 0px -150px 50px -100px #0E0D1F, inset 0px 300px 150px -50px #0E0D1F;
}
.pitch {
  width:100%;
  aspect-ratio:1.5;
  background-color:transparent;
  background-image:url('../../img/wk-actie-2026/pitch.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center bottom;
  display:flex;
  align-items:center;
  justify-content: space-around;
  overflow:visible;
  position:relative;
  padding:0% 3%;
  gap:5px;

}
  .pitch .position {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    flex-direction:column;
    min-height:60%;

  }
  .pitch .selector {
    background-color:var(--orange);
    width:40px;
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content: center;
    font-size:20px;
    color:white;
    border-radius:50%;
    box-shadow:0px 3px 15px -5px rgba(0,50,0,.9);
    cursor:pointer;
    transition:.3s;

  }

    .pitch .selector:hover {
      background-color:black;
      transform:scale(.8);
    }

    .pitch .selector:first-of-type .ph-arrows-clockwise,
    .pitch .player + .selector .ph-plus { display:none; }


  .pitch .overlay {
    position:absolute;
    width:calc(100% - 0px);
    left:0px;
    top:0;
    height:calc(100% - 0px);


    display:flex;
    justify-content: center;
    align-items:center;
    *backdrop-filter:blur(5px);
    *padding:25px;
    gap:5px;
    overflow:visible;
    opacity:0;
    pointer-events:none;
    transition:.3s;
  }
  .pitch .overlay.active {
    opacity:1;
    pointer-events:auto;
  }

    .pitch .overlay .player {
      height:auto;
      aspect-ratio: .6;
      transform:translateY(-200px);
      opacity:0;
      transition:.3s .2s;
      *filter:drop-shadow(0px 10px 40px rgba(0,0,0,1))

    }

    .pitch .overlay.active .player {
      opacity:1;
      transform:translateY(0);
    }
      .pitch .overlay.active .player:nth-of-type(1) { transition:.5s .3s; }
      .pitch .overlay.active .player:nth-of-type(2) { transition:.5s .7s; }
      .pitch .overlay.active .player:nth-of-type(3) { transition:.5s 1.1s; }
      .pitch .overlay.active .player:nth-of-type(4) { transition:.5s 1.5s; }


    .pitch .player {
      width:100%;
      background:transparent;
      display:block;
      aspect-ratio:.75;
      *background-image:url('../../img/wk-actie-2026/player.jpg');
      background-repeat:no-repeat;
      background-position:center;
      background-size:contain;
      filter:drop-shadow(0px 7px 15px rgba(0,0,0,.6));
    }
      .pitch .position .player {
        animation:playerAnim .7s 1;
      }

      .player[data-player="Jolanda van Wezel"] { background-image:url('../../img/wk-actie-2026/jolanda.jpg'); }
      .player[data-player="Esther Schoenmakers"] { background-image:url('../../img/wk-actie-2026/esther.jpg'); }
      .player[data-player="Paul Bartels"] { background-image:url('../../img/wk-actie-2026/paul.jpg'); }
      .player[data-player="Mark Damen"] { background-image:url('../../img/wk-actie-2026/mark.jpg'); }
      .player[data-player="Dirk Loose"] { background-image:url('../../img/wk-actie-2026/dirk.jpg'); }
      .player[data-player="Marieke de Bie"] { background-image:url('../../img/wk-actie-2026/marieke.jpg'); }
      .player[data-player="Iris van Diest"] { background-image:url('../../img/wk-actie-2026/iris.jpg'); }
      .player[data-player="Wouter de Vugt"] { background-image:url('../../img/wk-actie-2026/wouter.jpg'); }
      .player[data-player="Astrid Graus"] { background-image:url('../../img/wk-actie-2026/astrid.jpg'); }


  @keyframes playerAnim {
    0% { margin-top:-140%; opacity: 0; }

    50% { margin-top:-140%; opacity: 0; }
    100% { margin-top:-0px; opacity: 1; }
  }