*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body
{
    height: 100%;
    width: 100%;
    font-size: 1rem;
}

body {
    position: relative;
    background-image: url("images/videograin.gif");
    background-size: auto 50%, auto 50%;
    background-repeat: repeat;
    background-color: #170b00;
    text-align: center;
    font-size: 1em;
    width: 100%;
}


.content {
    position: relative;
    max-width: 45em;
    margin: auto;
}



.metro42-logo {
    width: 100%;
    padding: 2em;
    transition: transform 150ms, filter 150ms;
}
.metro42-logo:hover {
    transform: scale(1.025);
    filter: brightness(1.025);
}

.metro42-logo img {
    width: 100%;
    display: block;
    border-radius: 9%;
}



.metro42-links {
    width: 75%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: auto;
}

.metro42-links .item {
    height: 6em;
    transition: transform 150ms, filter 150ms;
}

.metro42-links .item:hover {
    transform: scale(1.1);
    filter: brightness(4.0) saturate(25%);
}







@media only screen and (max-width: 950px) {
    .content {max-width: 100%;}
}


@media only screen and (max-width: 500px) {
    .metro42-links {flex-flow: column;}
    .metro42-links .item {height: 5.5em;}
}






#liens
{
    /*background-color: green;*/
    height: 10%;
    width: auto;
    position: relative;
    top: 8%;
}

#liens img
{
    height: 75%;
    width: auto;
    vertical-align: middle;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 1.5%;
}

/*#liens .logoshop
{
    height: 100%;
    width: auto;
}*/

#logozone
{
    /*background-color: red;*/
    /*opacity: 0.2;*/
    text-align: center;
    height:75%;
    width:auto;
    position: relative;
    top: 5%;
}

#logozone #logo
{
    height: 100%;
    width: auto;
    vertical-align: middle;
}