/*-------------------------------------- Partido */
.boxPartido {
    width: 100%;
    height: 96px;
    display: grid;
    grid-template-rows: 8px  40px  40px  8px;
    grid-template-columns: 30px  1fr      80px;
    grid-template-areas: " .     .        ."
                         " .     partido  picture"
                         " .     partido  video"
                         " .     .        .";
    justify-items: center;
    align-items: center;
}

.picture {
    grid-area: picture;
    display: grid;
    justify-items: center;
    align-items: center;
}
.video {
    grid-area: video;
    display: grid;
    justify-items: center;
    align-items: center;
}
.partido {
    grid-area: partido;
    width: 100%;
    height: 80px;
    display: grid;
    grid-template-columns: 35px  85px   1fr      10px  30px    40px;
    grid-template-rows: 4px  36px  36px  4px;
    grid-template-areas: " .     .      .        .     .       ."
                         " .     hora   equipo1  .     score1  ."
                         " .     hora   equipo2  .     score2  ."
                         " .     .      .        .     .       .";
    font-family: Lato;
    font-size: 27px;
    background: #FFF;
    border-radius: 20px;
    justify-content:  center;
    align-content:  center;
}

.equipo1 {
    grid-area: equipo1;
    display: grid;
    letter-spacing: 4px;
    justify-content:  left;
    align-content:  center;
    color:#066;
}
.equipo2 {
    grid-area: equipo2;
    display: grid;
    letter-spacing:4px;
    justify-content:  left;
    align-content:  center;
    color:#033;
}
.score1 {
    grid-area: score1;
    display: grid;
    justify-content:  right;
    align-content:  center;
}
.score2 {
    grid-area: score2;
    display: grid;
    justify-content:  right;
    align-content:  center;
}
.hora {
    grid-area: hora;
    display: grid;
    font-size: 21px;
    font-weight: 400;
    justify-content:  left;
    align-content:  center;
    color:#099;
}
@media screen and (max-width: 768px) {
    .boxPartido {
        height: 84px;
        grid-template-rows: 7px  35px  35px  7px;
        grid-template-columns: 20px  1fr      70px;
        grid-template-areas: " .     .        ."
                             " .     partido  picture"
                             " .     partido  video"
                             " .     .        .";
    }
    .partido {
        height: 70px;
        grid-template-columns: 20px  70px   1fr      10px  25px    20px;
        grid-template-rows: 4px  31px  31px  4px;
        font-size: 25px;
    }
    .equipo1 {  letter-spacing: 2px;    }
    .equipo2 {  letter-spacing: 2px;    }
    .hora {     font-size: 20px;        }
}
@media screen and (max-width: 430px) {
    .boxPartido {
        height: 84px;
        grid-template-rows: 7px  35px  35px  7px;
        grid-template-columns: 20px  1fr      70px;
        grid-template-areas: " .     .        ."
                             " .     partido  picture"
                             " .     partido  video"
                             " .     .        .";
    }
    .partido {
        height: 70px;
        grid-template-columns: 10px  60px   1fr      1px  20px    25px;
        grid-template-rows: 4px  31px  31px  4px;
        font-size: 21px;
        border-radius:15px;
    }
    .equipo1 { letter-spacing: 3px;  }
    .equipo2 { letter-spacing: 3px;  }
    .hora {     font-size: 18px;        }
}
/*--------------------------------------- Fecha */
.boxFecha {
    display: grid;
    height: 45px;
    grid-template-rows: 10px  25px  10px;
    grid-template-columns: 30px  1fr;
    grid-template-areas: " .     ."
                         " .     fecha"
                         " .     .";
}
.fecha {
    grid-area: fecha;
    height: 25px;
    color:#066;
    font-family: Lato;
    font-size: 20px;
    letter-spacing: 2px;
    word-spacing: 5px;
}
/*-------------------------------------- Leyenda */
.boxLeyenda {
    width: 100%;
    height: 50px;
    display: grid;
    grid-template-columns: 60%  40%;
    grid-template-areas: " uno  dos";
    justify-items: center;
    align-items:center;
    font-family: Lato;
    background: #CDD;
    margin-top: 15px;
}
.uno {
    grid-area: uno;
    font-size: 20px;
    letter-spacing: 15px;
    color:#099;
    text-align: center;
}
.dos {
    grid-area: dos;
    font-size: 20px;
    letter-spacing: 5px;
    color:#099;
    text-align: center
}
@media screen and (max-width: 768px) {
    .boxLeyenda {
        width: 100%;
    }
}
@media screen and (max-width: 430px) {
    .boxLeyenda {
        width: 100%;
    }
}
/*------------------------------------- Fixture */
.box {
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 1fr   600px       1fr;
    grid-template-areas: " .     boxFixture  .";
    justify-items: center;
    align-items: center;
}
.boxFixture {
    grid-area: boxFixture;
    width: 600px;
    height: 100%;
    background: #DEE;
}
@media screen and (max-width: 768px) {
    .box {
        grid-template-columns: 100%;
        grid-template-areas: " boxFixture";
    }
}
@media screen and (max-width: 430px) {
    .box {
        grid-template-columns: 100%;
        grid-template-areas: " boxFixture";
    }
    .boxFixture {
        width: 100%;
        height: 100%;
    }
}