/* This CSS requires 5 people to be set up in the overlay
   Because the first slot is otherwise off screen */

/* Remove icons and set up transitions + avatar for roles */
#icon.tftv-staff {
 background-image: none !important;
}
tftv-staff {
 border-radius: 0 0 3px 3px;
 transition: left 0.2s;
 left: 0;
}

/* Setting up 'producer' in the first slot to move the other slots */
tftv-staff[name="Console"] { left: initial; }
tftv-staff[name="Console"] ~ tftv-staff { left: -144px; }
tftv-staff[name="Console"]:first-child { right: -576px; }
tftv-staff[name="Console"]:nth-child(2) { right: -432px; }
tftv-staff[name="Console"][icon="cam"] { right: -288px; }

/* Add the role above the avatars */
tftv-staff:before {
 position: relative;
 top: -24px;
 font-family: "Gotham HTF Bold", sans-serif;
 background-color: rgba(71,153,220, 0.7);
 display: block;
 text-align: center;
 border: 3px solid #4799dc;
 border-bottom: 0 none;
 border-radius: 3px 3px 0 0;
 margin: 0 -3px;
}

/* First person in the caster slot is 'host'
  Or in  case of 'producer' moves to the end and is 'producer' */
tftv-staff[icon="mic"]:first-child:before {
 content: 'Producer';
}
tftv-staff[icon="mic"][name="producer"i]:first-child:before {
 content: 'Producer';
}
/* Set the 2nd & 3rd slot up to be 'caster' */
tftv-staff[icon="mic"]:before,
tftv-staff[icon="cam"]:before {
 content: 'Caster';
}
/* Producers will now be 'analyst' */
tftv-staff[icon="prod"]:before {
 content: 'Analyst';
}