@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,400, 500, 600');

:root {
  --background: rgba(0, 0, 0, .75);
  --darkGrey:#1d1d1d;
  --midGrey:#aaa;
  --lightGrey: #ccc;
  --lightest: #fff;
  --veryLight: #e3e3e3;
  --hoverColour: #ff0000;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
	margin: 0;
	background: #ebebeb;
	font-family: 'Work Sans', sans-serif;
	font-weight: 300;
    width: 100%;
    height: 100%;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 0px;
    font-weight: 300;
}

h3 {
    font-size: 1rem;
    font-weight: 300;
    margin: 0px;
    font-style: italic;
}

button{
    display: inline-block;
    background: var(--darkGrey);
    padding: 10px 30px;
    color: var(--lightest);
    border: none;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
}

button:hover{
    background-color: var(--hoverColour);
}

button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:nth-child(odd) {
    background-color: var(--lightest);
}

strong {
    font-weight: 600;
}
.SMALLtext{
    font-size: .75rem;
}

div#preload { 
    display: none; 
}

.content {
  height: 480px;
    max-width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/HERO_2020-01.jpg);
  border-width: 0 0 2px 0 ; /* big top line, small bottom line, no left or right lines */
  border-color: var(--hoverColour);
  border-style: solid;
  display: grid;
  place-items: center;
  -webkit-animation: HEROani 60s ease-in-out infinite; /* 'rotate' HERO images*/
  -moz-animation: HEROani 60s ease-in-out infinite; /* 'rotate' HERO images*/
  animation: HEROani 60s ease-in-out infinite; /* 'rotate' HERO images*/

}

/* 'rotate' hero images */
@-webkit-keyframes HEROani{ 
    0%,100%{
        background-image: url(../img/HERO_2020-01.jpg);
    }
    20%{
        background-image: url(../img/HERO_2020-02.jpg);
    }
   40%{
        background-image: url(../img/HERO_2020-03.jpg);
    }
   60%{
        background-image: url(../img/HERO_2020-04.jpg);
    }
   80%{
        background-image: url(../img/HERO_2020-05.jpg);
    } 
    
}

@-moz-keyframes HEROani{ 
    0%,100%{
        background-image: url(../img/HERO_2020-01.jpg);
    }
    20%{
        background-image: url(../img/HERO_2020-02.jpg);
    }
   40%{
        background-image: url(../img/HERO_2020-03.jpg);
    }
   60%{
        background-image: url(../img/HERO_2020-04.jpg);
    }
   80%{
        background-image: url(../img/HERO_2020-05.jpg);
    } 
    
}

@keyframes HEROani{ 
    0%,100%{
        background-image: url(../img/HERO_2020-01.jpg);
    }
    20%{
        background-image: url(../img/HERO_2020-02.jpg);
    }
   40%{
        background-image: url(../img/HERO_2020-03.jpg);
    }
   60%{
        background-image: url(../img/HERO_2020-04.jpg);
    }
   80%{
        background-image: url(../img/HERO_2020-05.jpg);
    } 
    
}

.logo {
    color: var(--lightest);
    place-items: center;
}

.contContainer{ /* === FoF logo and strapline === */
  color: var(--lightest);
  text-shadow: 1px 1px rgba(0, 0, 0, .75);
  text-align: center;
  /* background-image: url(../img/2017-logo.png); */
  /*background-image: url(../img/bigFoFUkraine.png);*/
 /* background-image: url(../img/FoF_23-200.png); */ /*FoF LOGO*/
  background-image: url(../img/FoF_23-250.png); /*XMAS wreath*/
    
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
  height: 15em;
  padding-top: 13em;
}

.plainPage{ /*=== this is for "home" pages ===*/
    /*min-height: 100vh;  /*=== this forces the footer to the foot of the screen ===*/
    min-height: 94vh;     /*=== this forces the footer to the foot of the screen ===*/
    display: grid;
    grid-template-columns: 1% 1fr 1%;
    grid-template-areas: ". title ."
        ". pageContent ."
        "footer footer footer";
    grid-template-rows: auto 1fr auto;  /*=== this forces the footer to the foot of the screen ===*/
    grid-gap: .5em;
    text-align: center;
    /*background: var(--lightest);*/
}

.pageContent{
    grid-area: pageContent;
}

/* === navigation styles start here === */
header {
  background: var(--background);
  text-align: center;
  position: fixed;
  z-index: 999;
  width: 100%;
}

/* allow it to gain focus, making it tabbable */
.nav-toggle {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

.nav-toggle:focus ~ .nav-toggle-label {
  outline: 3px solid rgba(lightblue, .75);
}

.nav-toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 1em;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: var(--lightest);
  height: 2px;
  width: 2em;
  border-radius: 2px;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
}

.nav-toggle-label span::before {
  bottom: 7px;
}

.nav-toggle-label span::after {
  top: 7px;
}

nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background: var(--background);
  width: 100%;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

nav a {
  color: var(--lightGrey); 
  text-decoration: none;
  font-size: 1rem;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

nav a:hover {
  color: var(--lightest); /* white */
}

.nav-toggle:checked ~ nav {
  transform: scale(1,1);
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

/* === main 'call to action' === */
.main {
    display: grid;
    grid-template-columns: 1% 1fr 1%;
    grid-template-areas: ". nextgame ." 
        ". squadselector ."
        ". leaguePosition ."
        ". doubleUP ."
        ". feeds ."
        ". wallpapers ."
        ". latestblog ."
        ". QandA ."
        ". info ."
        ". contact ."
        ". contribution ."
        ". social ."
        "footer footer footer";
    grid-gap: .5em;
    text-align: center;
    background: var(--lightest);
}

.doubleUp{
    display: grid;
    grid-area: doubleUP;
    grid-template-columns: 1fr;
    grid-template-areas: "weatherAP" 
        "feature";
    /*grid-gap: .5em;*/
}

.feeds{
    display: grid;
    grid-area: feeds;
    grid-template-columns: 1fr;
    grid-template-areas: "facebookFEED" 
        "forumFEED" 
        "twitterFEED";
    grid-gap: .5em;
}

.forumFEED p{
    line-height: 1rem;
}
    
.feed-title{
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem;
    padding-top: .3rem;
    padding-bottom: .5rem;
    border-width: 0 0 1px 0 ; /* top, right, bottom, left lines */
    border-color: var(--veryLight);
    border-style: solid;
}
    
.forumFEED a{
    color: var(--darkGrey);
    text-decoration: none;
}
    
.feed-item-title{
    text-transform: uppercase;
    padding: 6px 0;
    margin: 0;
    border-width: 0 0 1px 0 ; /* top, right, bottom, left lines */
    border-color: var(--hoverColour);
    border-style: solid;
}
    
.feed-item-title a:hover{
    color: var(--hoverColour);
}
    
.feed-item-desc{
    line-height: 1.25rem;
    background: var(--veryLight);
    padding: 6px 6px 12px 6px;
    margin: 0;
}

.twitterFEED{
    grid-area: twitterFEED;
}

.main--title{
    font-weight: 600;
    background:  var(--background);
    color: var(--lightest);
    line-height: 2em;
    /*margin-top: .75em;*/
    margin-bottom: 1em;
}

.main p{
    line-height: 1.25rem;
}

.main img{
    max-width: 100%;
    display: block;
}

.nextgame{
    text-align: center;
    background: var(--lightest);
    grid-area: nextgame;

}

.nextgameGame{
    font-size: 1.25rem;
}

.nextgameDate{
    font-size: .85rem;
}

.nextgame img{
    margin-left: auto;
    margin-right: auto;
}

.squadselector{
    text-align: center;
    background: var(--lightest);
    grid-area: squadselector;
}

.squadselector img{
    margin-left: auto;
    margin-right: auto;
}


.wallpapers{
    text-align: center;
    background: var(--lightest);
    grid-area: wallpapers;

}

.wallpapers p{
    line-height: 1em;
}

.wallpapers img{
    margin-left: auto;
    margin-right: auto;
}

.latestblog{
    text-align: center;
    background: var(--lightest);
    grid-area: latestblog;
}

.latestblog p{
    line-height: 1em;
}

.latestblog img{
    margin-left: auto;
    margin-right: auto;
    width: 330px;
    height: 230px;
}

.QandA{
    background-color: var(--lightest);
    grid-area: QandA;  
    margin-left: auto;
    margin-right: auto;
}

.QandA img{
    margin-left: auto;
    margin-right: auto;
    width: 330px;
    height: 230px;
}

.QandA p{
    line-height: 1em;
}
/* === league table ===*/
.leaguePosition{
    grid-area: leaguePosition;
    display: grid;
    grid-template-columns: 1fr 1fr 5fr 1fr 1fr 1fr;
    grid-template-areas: "leagueName leagueName leagueName . . ." 
        "leagueTeam leagueTeam leagueTeam leaguePlay leagueGoalD leaguePoints"
        "leaguePositA teamBadgeA teamNameA teamPlayA teamGoalDA teamPointsA"
        "leaguePosit teamBadge teamName teamPlay teamGoalD teamPoints"
        "leaguePositB teamBadgeB teamNameB teamPlayB teamGoalDB teamPointsB"  
        "leaguePosit4 teamBadge4 teamName4 teamPlay4 teamGoal4D teamPoints4"
        "leaguePosit5 teamBadge5 teamName5 teamPlay5 teamGoal5D teamPoints5"
        "leaguePosit6 teamBadge6 teamName6 teamPlay6 teamGoal6D teamPoints6";  
    background-color: var(--darkGrey);
    /*grid-template-rows: 3em 2em 2em 2em 1fr;*/
    grid-template-rows: 2.9em 1.9em 1.9em 1.9em 1.9em 1.9em 1.9em;
}

.leaguePosition img{
    max-width: 100%;
    max-height: 100%;
    align-items: flex-start;
    display: block;
}
/* === league table data ===*/
.leagueName {
    grid-area: leagueName;
    /*grid-column: 1 / -1;*/
    grid-column: 1 / 11;
    grid-row: 1;
    content: '';
    font-weight: 600;
    max-height: 50px;
    text-align: left;
    background-color: var(--lightest);
}

.leagueName img{
    height: 100%;
    display: block;
}

.leagueTeam {
    grid-area: leagueTeam;
    grid-column: 1 / 8;
    grid-row: 2;
    color: var(--lightest);
    font-weight: 600;
    max-height: 30px;
    border-width: 3px 0 1px 0 ; /* big top line, small bottom line, no left or right lines */
    border-color: var(--lightest);
    border-style: solid;
    text-align: left;
    padding: .25em .5em 1em .5em; /*top left bottom right*/
}

.leaguePlay{
    grid-area: leaguePlay;
    grid-column: 8 / 9;
    grid-row: 2;
    color: var(--lightest);
    font-weight: 600;
    max-height: 30px;
    border-width: 3px 0 1px 0 ;
    border-color: var(--lightest);
    border-style: solid;
    color: var(--lightest);
    text-align: right;
    padding: .25em .5em 1em .5em; /*top left bottom right*/
}

.leagueGoalD{
    grid-area: leagueGoalD;
    grid-column: 9 / 10;
    grid-row: 2;
    color: var(--lightest);
    font-weight: 600;
    max-height: 30px;
    border-width: 3px 0 1px 0 ;
    border-color: var(--lightest);
    border-style: solid;
    color: var(--lightest);
    text-align: right;
    padding: .25em .5em 1em .5em; /*top left bottom right*/
}

.leaguePoints{
    grid-area: leaguePoints;
    grid-column: 10 / 11;
    grid-row: 2;
    color: var(--lightest);
    font-weight: 600;
    max-height: 30px;
    border-width: 3px 0 1px 0 ;
    border-color: var(--lightest);
    border-style: solid;
    color: var(--lightest);
    text-align: right;
    padding: .25em .5em 1em .5em; /*top left bottom right*/
}

/* === team above #TOP === */
.leaguePositA{
    grid-area: leaguePositA;
    grid-column: 1 / 2;
    grid-row: 3;
    color: var(--lightest);
    text-align: left;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamBadgeA{
    grid-area: teamBadgeA;
    grid-column: 2 / 3;
    grid-row: 3;
    color: var(--lightest);
    text-align: left;
    font-weight: 300;
    align-content: center;
    max-height: 30px;
}

.teamBadgeA img{
    /*height: 80%;*/
    align-content: center;
    padding-top: .15em;
    display: block;
}
    
.teamNameA{
    grid-area: teamNameA;
    grid-column: 3 / 8;
    grid-row: 3;
    color: var(--lightest);
    /*color: #ad9650; /*=== gold text ===*/
    text-align: left;
    padding: .5em;
    font-weight: 300;
    /*font-weight: 700;/*=== BOLD ===*/
    max-height: 30px;
}

.teamPlayA{
    grid-area: teamPlayA;
    grid-column: 8 / 9;
    grid-row: 3;
    color: var(--lightest);
    text-align: right;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamGoalDA{
    grid-area: teamGoalDA;
    grid-column: 9 / 10;
    grid-row: 3;
    color: var(--lightest);
    text-align: right;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamPointsA{
    grid-area: teamPointsA;
    grid-column: 10 / 11;
    grid-row: 3;
    color: var(--lightest);
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
    text-align: right;
}

/* === Team #MIDDLE === */
.leaguePositA1{
    grid-area: leaguePosit;
    grid-column: 1 / 2;
    grid-row: 4;
    color: var(--lightest);
    text-align: left;
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
}

.teamBadgeA1{
    grid-area: teamBadge;
    grid-column: 2 / 3;
    grid-row: 4;
    color: var(--lightest);
    text-align: left;
    font-weight: 300;
    align-content: center;
    max-height: 30px;
}
 
.teamBadgeA1 img{
    /*height: 80%;*/
    padding-top: .15em;
    display: block;
}

.teamNameA1{
    grid-area: teamName;
    grid-column: 3 / 8;
    grid-row: 4;
    color: var(--lightest);
    text-align: left;
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
}

.teamPlayA1{
    grid-area: teamPlay;
    grid-column: 8 / 9;
    grid-row: 4;
    color: var(--lightest);
    text-align: right;
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
}

.teamGoalDA1{
    grid-area: teamGoalD;
    grid-column: 9 / 10;
    grid-row: 4;
    color: var(--lightest);
    text-align: right;
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
}

.teamPointsA1{
    grid-area: teamPoints;
    grid-column: 10 / 11;
    grid-row: 4;
    color: var(--lightest);
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
    text-align: right;
}

/* === FULHAM #MIDDLE === */
.leaguePosit{
    grid-area: leaguePosit;
    grid-column: 1 / 2;
    grid-row: 4;
    /*background-color: var(--lightest);*/
    color: var(--lightest);
    text-align: left;
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
}

.teamBadge{
    grid-area: teamBadge;
    grid-column: 2 / 3;
    grid-row: 4;
    /*background-color: var(--lightest);*/
    color: var(--lightest);
    text-align: left;
    font-weight: 300;
    align-content: center;
    max-height: 30px;
}
 
.teamBadge img{
    /*height: 80%;*/
    padding-top: .15em;
    display: block;
}

.teamName{
    grid-area: teamName;
    grid-column: 3 / 8;
    grid-row: 4;
    /*background-color: var(--lightest);*/
    color: var(--lightest);
    text-align: left;
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
}

.teamPlay{
    grid-area: teamPlay;
    grid-column: 8 / 9;
    grid-row: 4;
    /*background-color: var(--lightest);*/
    color: var(--lightest);
    text-align: right;
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
}

.teamGoalD{
    grid-area: teamGoalD;
    grid-column: 9 / 10;
    grid-row: 4;
    /*background-color: var(--lightest);*/
    color: var(--lightest);
    text-align: right;
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
}

.teamPoints{
    grid-area: teamPoints;
    grid-column: 10 / 11;
    grid-row: 4;
    /*background-color: var(--lightest);*/
    color: var(--lightest);
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
    text-align: right;

}

/* === team Fulham #BOTTOM === */
.leaguePosit0{
    grid-area: leaguePositB;
    grid-column: 1 / 2;
    grid-row: 5;
    background-color: var(--lightest);
    text-align: left;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamBadge0{
    grid-area: teamBadgeB;
    grid-column: 2 / 3;
    grid-row: 5;
    background-color: var(--lightest);
    text-align: left;
    font-weight: 300;
    align-content: center;
    max-height: 30px;
}
   
.teamBadge0 img{
    /*height: 80%;*/
    padding-top: .15em;
    display: block;
}

.teamName0{
    grid-area: teamNameB;
    grid-column: 3 / 8;
    grid-row: 5;
    background-color: var(--lightest);
    text-align: left;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
    /*padding-bottom: 2em;*/
}

.teamPlay0{
    grid-area: teamPlayB;
    grid-column: 8 / 9;
    grid-row: 5;
    background-color: var(--lightest);
    text-align: right;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamGoalD0{
    grid-area: teamGoalDB;
    grid-column: 9 / 10;
    grid-row: 5;
    background-color: var(--lightest);
    text-align: right;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamPoints0{
    grid-area: teamPointsB;
    grid-column: 10 / 11;
    grid-row: 5;
    background-color: var(--lightest);
    text-align: right;
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
}

/* === team below === */
.leaguePositB{
    grid-area: leaguePositB;
    grid-column: 1 / 2;
    grid-row: 5;
    color: var(--lightest);
    text-align: left;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamBadgeB{
    grid-area: teamBadgeB;
    grid-column: 2 / 3;
    grid-row: 5;
    color: var(--lightest);
    text-align: left;
    font-weight: 300;
    align-content: center;
    max-height: 30px;
}
   
.teamBadgeB img{
    /*height: 80%;*/
    padding-top: .15em;
    display: block;
}

.teamNameB{
    grid-area: teamNameB;
    grid-column: 3 / 8;
    grid-row: 5;
    color: var(--lightest);
    text-align: left;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
    padding-bottom: 2em;
}

.teamPlayB{
    grid-area: teamPlayB;
    grid-column: 8 / 9;
    grid-row: 5;
    color: var(--lightest);
    text-align: right;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamGoalDB{
    grid-area: teamGoalDB;
    grid-column: 9 / 10;
    grid-row: 5;
    color: var(--lightest);
    text-align: right;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamPointsB{
    grid-area: teamPointsB;
    grid-column: 10 / 11;
    grid-row: 5;
    color: var(--lightest);
    text-align: right;
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
}
   

/* === 4th team === */
.leaguePosit4{
    grid-area: leaguePosit4;
    grid-column: 1 / 2;
    grid-row: 6;
    color: var(--lightest);
    text-align: left;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamBadge4{
    grid-area: teamBadge4;
    grid-column: 2 / 3;
    grid-row: 6;
    color: var(--lightest);
    text-align: left;
    font-weight: 300;
    align-content: center;
    max-height: 30px;
}
   
.teamBadge4 img{
    /*height: 80%;*/
    padding-top: .15em;
    display: block;
}

.teamName4{
    grid-area: teamName4;
    grid-column: 3 / 8;
    grid-row: 6;
    color: var(--lightest);
    text-align: left;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
    padding-bottom: 2em;
}

.teamPlay4{
    grid-area: teamPlay4;
    grid-column: 8 / 9;
    grid-row: 6;
    color: var(--lightest);
    text-align: right;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamGoal4D{
    grid-area: teamGoal4D;
    grid-column: 9 / 10;
    grid-row: 6;
    color: var(--lightest);
    text-align: right;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamPoints4{
    grid-area: teamPoints4;
    grid-column: 10 / 11;
    grid-row: 6;
    color: var(--lightest);
    text-align: right;
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
}

/* === 5th team === */
.leaguePosit5{
    grid-area: leaguePosit5;
    grid-column: 1 / 2;
    grid-row: 7;
    color: var(--lightest);
    text-align: left;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamBadge5{
    grid-area: teamBadge5;
    grid-column: 2 / 3;
    grid-row: 7;
    color: var(--lightest);
    text-align: left;
    font-weight: 300;
    align-content: center;
    max-height: 30px;
}
   
.teamBadge5 img{
    /*height: 80%;*/
    padding-top: .15em;
    display: block;
}

.teamName5{
    grid-area: teamName5;
    grid-column: 3 / 8;
    grid-row: 7;
    color: var(--lightest);
    text-align: left;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
    padding-bottom: 2em;
}

.teamPlay5{
    grid-area: teamPlay5;
    grid-column: 8 / 9;
    grid-row: 7;
    color: var(--lightest);
    text-align: right;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamGoal5D{
    grid-area: teamGoal5D;
    grid-column: 9 / 10;
    grid-row: 7;
    color: var(--lightest);
    text-align: right;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamPoints5{
    grid-area: teamPoints5;
    grid-column: 10 / 11;
    grid-row: 7;
    color: var(--lightest);
    text-align: right;
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
}

/* === 6th team === */
.leaguePosit6{
    grid-area: leaguePosit6;
    grid-column: 1 / 2;
    grid-row: 8;
    color: var(--lightest);
    text-align: left;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamBadge6{
    grid-area: teamBadge6;
    grid-column: 2 / 3;
    grid-row: 8;
    color: var(--lightest);
    text-align: left;
    font-weight: 300;
    align-content: center;
    max-height: 30px;
}
   
.teamBadge6 img{
    /*height: 80%;*/
    padding-top: .15em;
    display: block;
}

.teamName6{
    grid-area: teamName6;
    grid-column: 3 / 8;
    grid-row: 8;
    color: var(--lightest);
    text-align: left;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
    padding-bottom: 2em;
}

.teamPlay6{
    grid-area: teamPlay6;
    grid-column: 8 / 9;
    grid-row: 8;
    color: var(--lightest);
    text-align: right;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamGoal6D{
    grid-area: teamGoal6D;
    grid-column: 9 / 10;
    grid-row: 8;
    color: var(--lightest);
    text-align: right;
    padding: .5em;
    font-weight: 300;
    max-height: 30px;
}

.teamPoints6{
    grid-area: teamPoints6;
    grid-column: 10 / 11;
    grid-row: 8;
    color: var(--lightest);
    text-align: right;
    padding: .35em .5em 1em .5em; /*top left bottom right*/
    font-weight: 300;
    max-height: 30px;
}

/* === end of league table ===*/
/* === end of main 'call to action' === */

/* === start of feature (sliding shirts) ===  */

.feature{
    background-color: var(--veryLight);
    grid-area: feature;
    position: relative;
}
    
.feature img{
    max-width: 100%;
    max-height: 100%;
    display: block;
}
    
.twentytwenty-container{
    grid-area: feature;
    background-color: var(--veryLight);
    height: 420px;

}
    
.twentytwenty-container img{
    max-width: 100%;
    max-height: 420px;
    display: block;
}
/* === end of feature (sliding shirts) ===  */
.title{
    font-size: 1.5rem;
    text-align: left;
    margin-top: 1rem;
    padding-top: 1rem;
    border-width: 2px 0 0 0 ; /* big top line, no bottom, left or right lines */
    border-color: var(--hoverColour);
    border-style: solid;
}
.info {
    grid-area: info;
    text-align: justify;
}

.info p {
    line-height: 1.25rem;
}
/* === CONTACT FORM  === */
.contact {
    display: grid;
    grid-area: contact;
    grid-template-columns: 1fr;
    grid-template-areas: "conTitle"
        "conText"
        "conForm";  
    /*background-color: var(--midGrey);*/
    background: #d6d6c2;
    border-radius: 0 0 10px 10px;
}

.contact h2{
    grid-area: conTitle;
}
.contact h3{
    grid-area: conText;
    padding-bottom: 2rem;
}

.contact-form{
    grid-area: conForm;
    width: 70%;
    max-width: 37em;
    position: relative;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 1em 2.5em;
    /*background: #999966;*/
    /*background: #f6f6f6;*/
    background: #ffffff;
    background-image: -webkit-linear-gradient( rgba(130,130,130,.045) ,#ffffff);
    background-image: linear-gradient(to bottom , rgba(130,130,130,.045) ,#ffffff);
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 5px 25px 0 rgba(0,0,0, .25);
    margin-bottom: 50px;
}

.contactTitle{
    margin-top: 0;
    font-weight: 300;
    font-size: 1.25em;
    text-align: left;
    /*color: white;*/
    background-image: url(../img/PaperPlaneG.png);
    background-repeat: no-repeat;
    height: 2.2rem;
    padding-left: 3.5rem;
    padding-top: 1rem;
}

.contactText{
    border: 1px solid var(--lightGrey);
    margin: 8px 0;
    padding: 12px 18px;
    border-radius: 8px;
}

.contactText label{
    display: block;
    color: var(--darkGrey);
    text-align: left;
    text-transform: uppercase;
    font-size: .75em;
}

.contactText input,
.contactText textarea{
    width: 100%;
    border: none;
    /*background: #d6d6c2;*/
    border-radius: 4px;
    border: 1px solid var(--lightGrey);
    background: #ffffff; /* Old browsers */
    background: -webkit-linear-gradient(#ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: -o-linear-gradient(#ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: linear-gradient(#ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
    /*background-image: linear-gradient(white 50%, #bdbdbd 50%, #bdbdbd);*/
    outline: none;
    font-size: 1em;
    margin-top: 6px;
    padding: .25rem;
}

.btnS{
    display: inline-block;
    background: var(--darkGrey);
    padding: 10px 30px;
    color: var(--lightest);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.btnS:hover{
    background-color: var(--hoverColour);
}

/* === END of CONTACT FORM  === */

/* === contribution === */
.contribution{
    display: grid;
    grid-area: contribution;
    grid-template-columns: 1% 1fr 1%;
    grid-template-areas: ". contTitle ."
        ". contLeft ."
        ". contRight .";
    text-align: center;
    background: var(--lightest);
}

.contTitle{
    grid-area: contTitle;
    grid-column: 1 / 4;
    font-weight: 600;
    background:  var(--background);
    color: var(--lightest);
    line-height: 2em;
    margin-bottom: 1em;
}

.contLeft{
    grid-area: contLeft;
    grid-column: 1 / 4;
    text-align: justify;
    padding: 0;
}

.contLeft p{
    line-height: 1.5em;
}

.contRight{
    grid-area: contRight;
    grid-column: 1 / 4;
    align-items: center;
}
/* === end of contribution === */

.footer{
    background: var(--background);
    color: var(--lightGrey);
    grid-area: footer;
    height: 2rem;
    padding: 2em 1em 2em 1em; /*top left bottom right*/
    text-align: center;

}

/*== start of social icons 
.social{
    grid-area: social;
}

.social a{
    color: var(--background);
}
/*==
.fa-facebook {
    color: var(--background);
    margin:0 1rem 1rem;
  }

.fa-facebook:hover{
    color: rgb(59, 91, 152);
  }

.fa-youtube{
    color: var(--background);
    margin:0 1rem 1rem;
}

.fa-youtube:hover{
    color: var(--hoverColour);
}

.fa-soundcloud{
    color: var(--background);
    margin:0 1rem 1rem;
}

.fa-soundcloud:hover{
    color: rgb(255, 101, 52);
}

.fa-twitter{
    color: var(--background);
    margin:0 1rem 1rem;
}

.fa-twitter:hover{
    color: rgb(80, 160, 235);
}

.fa-instagram{
    color: var(--background);
    margin:0 1rem 1rem;
}

.fa-instagram:hover{
    background: -webkit-linear-gradient(135deg, #f06445, #d72e23, #ac2798);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

/*background: linear-gradient(135deg, #f06445, #d72e23, #ac2798);
    background-clip: text;
    text-fill-color: transparent;*/

/*
    margin:0 1rem 1rem;
}

.fa-itunes{
    color: var(--background);
    margin:0 1rem 1rem;
}

.fa-itunes:hover{
    background: -webkit-linear-gradient(135deg, #03c7ff, #a06dfa, #ff5c6a, #ff5e50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*background: linear-gradient(135deg, #f06445, #d72e23, #ac2798);
    background-clip: text;
    text-fill-color: transparent;*/

/*
    margin:0 1rem 1rem;
}

*/
/*== end of social icons ==*/

/*=============================*/
/*===      MEDIA CALLS      ===*/
/*=============================*/
@media screen and (min-width: 800px) {
  .nav-toggle-label {
    display: none;
  }

  header {
    display: grid;
    grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
  }
  
  .logo {
    grid-column: 2 / 3;
  }
  
  nav {
    // all: unset; /* this causes issues with Edge, since it's unsupported */
    
    /* the following lines add Edge support */
    position: relative;
    text-align: left;
    transition: none;
    transform: scale(1,1);
    background: none;
    top: initial;
    left: initial;
    /* end Edge support stuff */
    
    grid-column: 3 / 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  nav ul {
    display: flex;
  }
  
  nav li {
    margin-left: 3em;
    margin-bottom: 0;
  }
  
  nav a {
    opacity: 1;
    position: relative;
  }
  
  nav a::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--hoverColour);
    position: absolute;
    bottom: -.25em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transform-origin: left;
    transition: transform ease-in-out 250ms;
  }
  
  nav a:hover::before {
    transform: scale(1,1);
  }
/* === end of navigation                                             === */

/* === main 'call to action'                                         === */
/* === increase 'call to action' sections across screen for PC only  === */
.main {
    display: grid;
    min-height: 100%;
    grid-template-rows: auto;
    grid-template-columns: 1% 1fr 1fr 1fr 1%;
    grid-template-areas: ". nextgame squadselector leaguePosition ."
        ". doubleUP doubleUP doubleUP ."
        ". feeds feeds feeds ."
        ". QandA wallpapers latestblog ."
        ". info info info ."
        ". contact contact contact ."
        ". contribution contribution contribution ."
        ". social social social ."
        "footer footer footer footer footer";
    grid-gap: .5em;
    text-align: center;
    background: var(--lightest);
}
    
.doubleUp{
    display: grid;
    grid-area: doubleUP;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "weatherAP feature"
    /*grid-gap: .5em;*/
}
    
.feeds{
    display: grid;
    grid-area: feeds;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "facebookFEED forumFEED twitterFEED";
    grid-gap: .5em;
}
    
.forumFEED{
    grid-area: forumFEED;
}
    
.forumFEED p{
    line-height: 1rem;
}
    
.feed-title{
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem;
    padding-top: .3rem;
    padding-bottom: .5rem;
    border-width: 0 0 1px 0 ; /* top, right, bottom, left lines */
    border-color: var(--veryLight);
    border-style: solid;
}
    
.forumFEED a{
    color: var(--darkGrey);
    text-decoration: none;
}
    
.feed-item-title{
    text-transform: uppercase;
    padding: 6px 0;
    margin: 0;
    border-width: 0 0 1px 0 ; /* top, right, bottom, left lines */
    border-color: var(--hoverColour);
    border-style: solid;
}
    
.feed-item-title a:hover{
    color: var(--hoverColour);
}
    
.feed-item-desc{
    line-height: 1rem;
    background: var(--veryLight);
    padding: 6px 6px 12px 6px;
    margin: 0;
}

.twitterFEED{
    grid-area: twitterFEED;
}
    
/* === start of feature (sliding shirts) ===  */

.feature{
    background-color: var(--veryLight);
    grid-area: feature;
    position: relative;
}
    
.feature img{
    max-width: 100%;
    max-height: 100%;
    display: block;
}
    
.twentytwenty-container{
    grid-area: feature;
    background-color: var(--veryLight);
    width: 100%;
}
    
.twentytwenty-container img{
    max-width: 100%;
    max-height: 100%;
    display: block;
}
    
/* === contribution === */
.contribution{
    display: grid;
    grid-area: contribution;
    grid-template-columns: 1% 1fr 1fr 1%;
    grid-template-areas: ". contTitle conTitle ."
        ". contLeft contRight .";
    text-align: center;
    background: var(--lightest);
}

.contTitle{
    grid-area: contTitle;
    grid-column: 1 / 5;
    font-weight: 600;
    background:  var(--background);
    color: var(--lightest);
    line-height: 2em;

}

.contLeft{
    grid-area: contLeft;
     grid-column: 1 / 3;
    text-align: justify;
    padding: 0;
}

.contLeft p{
    line-height: 1.5em;
    padding: 0;
}

.contRight{
    grid-area: contRight;
     grid-column: 3 / 4;
    align-items: center;
}
/* === end of contribution === */