/*=== team selection ===*/ 
.teamStart{
    display: grid;
    grid-area: allFanGroups;
    grid-template-columns: 1% 1fr 1%;
    grid-template-areas: ". selectInstruct .";
    background: white;
}

.formation{
    
}

.shirt{
    
}

.pitchType{
    display: block;
    margin: 0 auto;
    text-align: center;
}

.pitchType img{
    display: inline-block;
    width: 84px !important;
    height: 120px !important;
}

.shirtType{
    display: block;
    margin: 0 auto;
    text-align: center;
}

.teamselectN{
    display: inline-block;
    grid-area: teamPlayer;
}

.teamselect{
    display: grid;
    grid-area: allFanGroups;
    grid-template-columns: 1% 1fr 1%;
    grid-template-areas: ". teamPitch ."
        ". teamPlayer ."
        ". selectText ."
        ". selectInstruct .";
    background: white;
}

/*=== background for selection ===*/
.teamPitch{
    grid-area: teamPitch;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "ddStriker"
        "ddMidfield"
        "ddDefence"
        "ddGoalie"
        /*"ddSubs"*/;
    grid-template-rows: 90px 120px 120px 90px ;
    height: 400px;
    width: 289px;
    left: 50%;
    right: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .75rem;
    padding-bottom: .75rem;
    background-image: url(../img/footballPitchDD-P.png);
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.teamPitch img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.teamPitch select{
    box-shadow: 0 10px 25px rgba(0,0,0,.75);
    padding: .25em .5em;
    background: #d6d6c2;
    border-radius: 3px;
    border: 0;
}

.ddTitle{
    grid-area: ddTitle;
    font-size: .75rem;
    font-style: italic;
}

.ddStriker{
    grid-area: ddStriker;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: ". ddSTRIKE1 . ddSTRIKE2 .";
    padding-top: 1rem;
}

.ddSTRIKE1{
    grid-area: ddSTRIKE1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 1.8rem;
    width: 50px !important;
    height: 50px !important;
}

.ddSTRIKE2{
    grid-area: ddSTRIKE2;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 1.8rem;
    width: 50px !important;
    height: 50px !important;
}

.ddMidfield{
    grid-area: ddMidfield;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas: ". ddMID1 . . . . ddMID2 ."
        ". . ddMID3 . . ddMID4 . .";
}

.ddMID1{
    grid-area: ddMID1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 1.8rem;
    width: 50px !important;
    height: 50px !important;
}

.ddMID2{
    grid-area: ddMID2;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 1.8rem;
    width: 50px !important;
    height: 50px !important;
}

.ddMID3{
    grid-area: ddMID3;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 1.8rem;
    width: 50px !important;
    height: 50px !important;
}

.ddMID4{
    grid-area: ddMID4;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 1.8rem;
    width: 50px !important;
    height: 50px !important;
}

.ddDefence{
    grid-area: ddDefence;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas: " . ddDEF1 . . . . ddDEF2 ."
        ". . ddDEF3 . . ddDEF4 . .";
}

.ddDEF1{
    grid-area: ddDEF1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 1.8rem;
    width: 50px !important;
    height: 50px !important;
}

.ddDEF2{
    grid-area: ddDEF2;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 1.8rem;
    width: 50px !important;
    height: 50px !important;
}

.ddDEF3{
    grid-area: ddDEF3;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 1.8rem;
    width: 50px !important;
    height: 50px !important;
}

.ddDEF4{
    grid-area: ddDEF4;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 1.8rem;
    width: 50px !important;
    height: 50px !important;
}

.ddGoalie{
    grid-area: ddGoalie;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: ". ddGOAL .";
}

.ddGOAL{
    grid-area: ddGOAL;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21_goalie.png);
    background-size: cover;
    background-position: center;
    padding-top: 1.8rem;
    width: 50px !important;
    height: 50px !important;
}
/*==== INSTRUCTIONS ====*/
.selectInstruct{
    grid-area: selectInstruct;
    min-width: 100%;
    text-align: left;
    border-width: 0 0 2px 0 ; /* big top line, no bottom, left or right lines */
    border-color: var(--hoverColour);
    border-style: solid;
    padding: 1rem;
    font-size: .75rem;
}

.SItitle{
    font-size: 1.25rem;
    margin-bottom: 10px;
    border-width: 0 0 1px 0 ; /* big top line, no bottom, left or right lines */
    border-color: var(--hoverColour);
    border-style: solid;
}

.centerStuff{
    display: flex;
    justify-content: center;
}

.selectionButtons{
    grid-area: selectText;
    border-width: 1px 0 0 0 ; /* top, right, bottom, left lines */
    border-color: var(--hoverColour);
    border-style: solid;
    padding: 1rem;
    margin-top: .75rem;
}   

/*=====================================*/
/*=========    MEDIA CALLS    =========*/
/*=====================================*/
/*===     TABLETS     ===*/
@media only screen and (min-width: 730px) {
.teamselect{
    display: grid;
    grid-area: allFanGroups;
    grid-template-columns: 1% 1fr 1%;
    grid-template-areas: ". teamPitch ."
        ". selectInstruct .";
    background: white;
}
   
.pitchType img{
    width: 112px !important;
    height: 160px !important;
}
    
.teamPitch{
    grid-area: teamPitch;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: /*"ddTitle"*/
        "ddStriker"
        "ddMidfield"
        "ddDefence"
        "ddGoalie"
        /*"ddSubs"*/;
    grid-template-rows: 90px 160px 160px 90px ;
    height: 500px;
    width: 360px;
    left: 50%;
    right: 50%;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../img/footballPitchDD-T.png);
    background-size: cover;
    background-position: center;
    margin-bottom: .75rem;
    padding-bottom: .75rem;
    z-index: 1;
}
    .ddStriker{
    grid-area: ddStriker;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: ". ddSTRIKE1 ddSTRIKE2 .";
    
}

.ddSTRIKE1{
    grid-area: ddSTRIKE1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 2.5rem;
    width: 70px !important;
    height: 70px !important;
}

.ddSTRIKE2{
    grid-area: ddSTRIKE2;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 2.5rem;
    width: 70px !important;
    height: 70px !important;
}


.ddMidfield{
    grid-area: ddMidfield;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-areas: ". . . ddMID1 . . . ddMID2 . ."
        ". . . ddMID3 . . ddMID4 . . .";
}

.ddMID1{
    grid-area: ddMID1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 2.5rem;
    width: 70px !important;
    height: 70px !important;
}

.ddMID2{
    grid-area: ddMID2;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 2.5rem;
    width: 70px !important;
    height: 70px !important;
}

.ddMID3{
    grid-area: ddMID3;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 2.5rem;
    width: 70px !important;
    height: 70px !important;
}

.ddMID4{
    grid-area: ddMID4;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 2.5rem;
    width: 70px !important;
    height: 70px !important;
}

.ddDefence{
    grid-area: ddDefence;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas: ". ddDEF1 . . . ddDEF2 . ."
        ". . ddDEF3 . ddDEF4 . . .";
}

.ddDEF1{
    grid-area: ddDEF1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 2.5rem;
    width: 70px !important;
    height: 70px !important;
}

.ddDEF2{
    grid-area: ddDEF2;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 2.5rem;
    width: 70px !important;
    height: 70px !important;
}

.ddDEF3{
    grid-area: ddDEF3;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 2.5rem;
    width: 70px !important;
    height: 70px !important;
}

.ddDEF4{
    grid-area: ddDEF4;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 2.5rem;
    width: 70px !important;
    height: 70px !important;
}

.ddGoalie{
    grid-area: ddGoalie;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: ". ddGOAL .";
}

.ddGOAL{
    grid-area: ddGOAL;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21_goalie.png);
    background-size: cover;
    background-position: center;
    padding-top: 2.5rem;
    width: 70px !important;
    height: 70px !important;
}

    
.selectInstruct{
    font-size: 1rem;
}
    
    .modal-container {
  position: fixed;
  background-color: #fff;
  border: #d6d6c2 solid 1px;
  top: 0;
  font-size: .75rem;
  padding: 1rem;
  border-radius: 5px;
  box-shadow: 0 5px 25px 0 rgba(0,0,0, .25);
  z-index: 11;
  -webkit-transform: translate(-50%, -200%);
  -ms-transform: translate(-50%, -200%);
  transform: translate(-50%, -200%);
  -webkit-transition: -webkit-transform 200ms ease-out;
  transition: transform 200ms ease-out;
}

.modal:before {
  content: "";
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.modal:target .modal-container {
  top: 10%;
  -webkit-transform: translate(40%, 0%);
  -ms-transform: translate(40%, 0%);
  transform: translate(40%, 0%);
}
 
}
    
/*=== END OF TABLETS ===*/

/*===    LAPTOPS/PCs     ===*/
@media only screen and (min-width: 850px) {
       
.teamPitch{
    grid-area: teamPitch;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "ddTitle"
        "ddStriker"
        "ddMidfield"
        "ddDefence"
        "ddGoalie"
        /*"ddSubs"*/;
    grid-template-rows: 12px 90px 180px 180px 90px ;
    height: 600px;
    width: 433px;
    left: 50%;
    right: 50%;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../img/footballPitchDD.png);
    background-size: cover;
    background-position: center;
    margin-bottom: .75rem;
    padding-bottom: .75rem;
    z-index: 1;
}
    
.teamPitch img{
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
    
.ddGoalie select{
    margin-top: -50px;
}
 
.teamselect{
    display: grid;
    grid-area: allFanGroups;
    grid-template-columns: 1% 1.5fr 1fr 1%;
    grid-template-areas: ". selectInstruct teamPitch .";
    background: white;
}  
    
.ddStriker{
    grid-area: ddStriker;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: ". ddSTRIKE1 ddSTRIKE2 .";
    
}

.ddSTRIKE1{
    grid-area: ddSTRIKE1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 3.5rem;
    width: 90px !important;
    height: 90px !important;
}

.ddSTRIKE2{
    grid-area: ddSTRIKE2;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 3.5rem;
    width: 90px !important;
    height: 90px !important;
}

.ddMidfield{
    grid-area: ddMidfield;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-areas: ". . . ddMID1 . . . ddMID2 . ."
        ". . . . ddMID3 . ddMID4 . . .";
}

.ddMID1{
    grid-area: ddMID1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 3.5rem;
    width: 90px !important;
    height: 90px !important;
}

.ddMID2{
    grid-area: ddMID2;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 3.5rem;
    width: 90px !important;
    height: 90px !important;
}

.ddMID3{
    grid-area: ddMID3;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 3.5rem;
    width: 90px !important;
    height: 90px !important;
}

.ddMID4{
    grid-area: ddMID4;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 3.5rem;
    width: 90px !important;
    height: 90px !important;
}

.ddDefence{
    grid-area: ddDefence;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas: " . . ddDEF1 . . ddDEF2 . ."
        ". . . ddDEF3 ddDEF4 . . .";
}

.ddDEF1{
    grid-area: ddDEF1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 3.5rem;
    width: 90px !important;
    height: 90px !important;
}

.ddDEF2{
    grid-area: ddDEF2;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 3.5rem;
    width: 90px !important;
    height: 90px !important;
}

.ddDEF3{
    grid-area: ddDEF3;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 3.5rem;
    width: 90px !important;
    height: 90px !important;
}

.ddDEF4{
    grid-area: ddDEF4;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21h.png);
    background-size: cover;
    background-position: center;
    padding-top: 3.5rem;
    width: 90px !important;
    height: 90px !important;
}

.ddGoalie{
    grid-area: ddGoalie;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: ". ddGOAL .";
}

.ddGOAL{
    grid-area: ddGOAL;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/avatars/20-21_goalie.png);
    background-size: cover;
    background-position: center;
    padding-top: 3.5rem;
    width: 90px !important;
    height: 90px !important;
}

.selectInstruct{
    grid-area: selectInstruct;
    text-align: left;
    border-style: hidden;
    padding: .5rem 1rem 1rem 1rem;
    margin-top: 12px;
    font-size: 1rem;
    height: 600px;
    min-width: 100%;
}
    
.selectionButtons{
    grid-area: selectText;
    padding: 1rem;
    margin-top: .75rem;
}

.output{
    width: 400px;
    height: 554px;
}
    
}
/*===    END OF LAPTOPS/PCs     ===*/