html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Sections and scaffold together */

* { box-sizing: border-box }

html, body {
  width: 99.9%;
  height: 100%;
  background-color: #d0d0d0;
}

div {
  float: left;
  display: block;
  color: #fff;
  width: 33.33333%;
  height: 25%;
  position: relative;
  transition: opacity 0.5s ease;
  -webkit-transition: 0.5s ease;
  border: 5px solid;
}

@media only screen and (max-width: 767px) {
    
    div {
  float: left;
  display: block;
  color: #fff;
  width: 100%;
  height: 80%;
  position: relative;
  transition: opacity 0.5s ease;
  -webkit-transition: 0.5s ease;
}
    
  html,body {
    overflow: scroll;
      }
    
}    

div:hover {
  opacity: 0.85;
}

h1{
  color: #000;
  font-size: large;
  font-weight: bold;
  text-align: center;
}

h2{
  color: #ffffff;
  font-size: medium;
  text-align: left;
  margin: -11px 0 0 13px;
}

h3{
  font-size: large;
  text-align: left;
  font-weight: bolder;
  color: #ffffff;
}

h4{
  font-size: 0.78em;
  text-align: left;
  color: #ffffff;
}

h5{
  font-size: 0.70em;
  text-align: left;
  color: #ffffff;
}

h4{
  font-size: 0.65em;
  text-align: left;
  color: #ffffff;
}


p {
  font-family: 'Noto Sans', sans-serif;
  font-size: 1em;
  position: absolute;
  bottom: 0;
  padding-left: 0.2em;
  margin-bottom: 0.3em;
}

a{
  text-decoration: none;
  color: #fff;
}

.inspired-by{
  color: black;
  text-decoration: underline;
}

a:hover{
  text-decoration: none;
  color: #111;
}

header{
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.gallagher {
  background-image: url('https://chcextra5.com/superbowl/gallagher.jpg');
    background-size: cover;
}

.gallagher:hover {
background-image: url(https://chcextra5.com/superbowl/patriots-background.jpg);
    background-size: cover;
}

.hudon {
  background-image: url('https://chcextra5.com/superbowl/hudon.jpg');
    background-size: cover;
}

.hudon:hover {
background-image: url(https://chcextra5.com/superbowl/patriots-background.jpg);
    background-size: cover;
}

.lehkonen {
  background-image: url('https://chcextra5.com/superbowl/lehkonen.jpg');
    background-size: cover;
}

.lehkonen:hover {
background-image: url(https://chcextra5.com/superbowl/patriots-background.jpg);
    background-size: cover;
}

.froese {
  background-image: url('https://chcextra5.com/superbowl/froese.jpg');
    background-size: cover;
}

.froese:hover {
background-image: url(https://chcextra5.com/superbowl/eagles-background.jpg);
    background-size: cover;
}

.shaw49 {
  background-image: url('https://chcextra5.com/superbowl/shaw.jpg');
    background-size: cover;
}

.shaw49:hover {
background-image: url(https://chcextra5.com/superbowl/patriots-background.jpg);
    background-size: cover;
}

.mete {
  background-image: url('https://chcextra5.com/superbowl/mete.jpg');
    background-size: cover;
}

.mete:hover {
background-image: url(https://chcextra5.com/superbowl/patriots-background.jpg);
    background-size: cover;
}

.deslauriers {
  background-image: url('https://chcextra5.com/superbowl/deslauriers.jpg');
    background-size: cover;
}

.deslauriers:hover {
background-image: url(https://chcextra5.com/superbowl/patriots-background.jpg);
    background-size: cover;
}

.carr {
  background-image: url('https://chcextra5.com/superbowl/carr.jpg');
    background-size: cover;
}

.carr:hover {
background-image: url(https://chcextra5.com/superbowl/patriots-background.jpg);
    background-size: cover;
}

.morrow {
  background-image: url('https://chcextra5.com/superbowl/morrow.jpg');
    background-size: cover;
}

.morrow:hover {
background-image: url(https://chcextra5.com/superbowl/patriots-background.jpg);
    background-size: cover;
}

.drouin {
  background-image: url('https://chcextra5.com/superbowl/drouin.jpg');
    background-size: cover;
}

.drouin:hover {
background-image: url(https://chcextra5.com/superbowl/patriots-background.jpg);
    background-size: cover;
}

.dlr {
  background-image: url('https://chcextra5.com/superbowl/dlr.jpg');
    background-size: cover;
}

.dlr:hover {
background-image: url(https://chcextra5.com/superbowl/patriots-background.jpg);
    background-size: cover;
}

.pacioretty {
  background-image: url('https://chcextra5.com/superbowl/pacioretty.jpg');
    background-size: cover;
}

.pacioretty:hover {
background-image: url(https://chcextra5.com/superbowl/eagles-background.jpg);
    background-size: cover;
}

.texte {
padding: 0% 5% 0% 5%;
font-size: 1.2em;
color: #FFF;
font-family: 'Noto Sans', sans-serif;
width: 100%!important;
border: none;       
}

.bloc span {
  visibility: hidden;
}
.bloc:hover span {
  visibility: visible;  
}

.score {
font-size: 2.5em;
}