img.map{
    border:1px solid #444;
    max-width:100%;
    border:1px solid #444
}
@keyframes fadeIn{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
@keyframes rotate{
    0%{
        transform:rotate(0deg)
    }
    10%{
        transform:rotate(5deg)
    }
    30%{
        transform:rotate(-5deg)
    }
    50%{
        transform:rotate(5deg)
    }
    60%{
        transform:rotate(0deg)
    }
}
@keyframes rotateLogo{
    0%{
        transform:rotate(0deg)
    }
    100%{
        transform:rotate(360deg)
    }
}
.rotateLogo{
    animation:rotateLogo 2s;
    animation-delay:3s
}
.asLogo{
    margin-left:0;
    margin-right:20px;
    border:1px solid #444;
    animation:rotate 2s;
    animation-delay:6s
}
a.overskrift{
    padding-top:52px;
    font-size:27px;
    font-weight:lighter;
    color:#444;
    text-decoration:none
}
span.arrow{
    color:#ff9a5f
}
.filter{
    margin-bottom:5px;
    width:100px
}
input[type="text"]{
    font-family:verdana;
    font-size:16px
}
h1{
    font-size 18px;
}
h2{
    font-size:14px
}
.myClear{
    clear:both
}
a{
    color:#000
}
a:visited{
    color:#000
}
p{
    font-family:verdana
}
.linkLogo,.rotateLogo{
    float:left;
    margin-left:2px;
    margin-top:5px;
    margin-right:11px;
    border:1px solid #444
}
.myGrid{
    display:grid;
    grid-template-columns:repeat(8, auto);
    grid-gap:1px
}
img.tut{
    max-width:100%;
    height:auto;
    border:1px solid #444
}
.g-header-center{
    white-space:nowrap;
    text-align:center;
    box-shadow:0 0 0 1px #BBB;
    padding:5px;
    background-color:#555;
    color:white
}
.g-header-left{
    text-align:left;
    box-shadow:0 0 0 1px #BBB;
    padding:5px;
    background-color:#555;
    color:white
}
.g-wide{
    box-shadow:0 0 0 1px #BBB;
    padding:5px;
    background-color:#eee
}
.g-normal{
    box-shadow:0 0 0 1px #BBB;
    padding:5px;
    background-color:#eee
}
.g-normalCenter{
    box-shadow:0 0 0 1px #BBB;
    text-align:center;
    padding:5px;
    background-color:#eee
}
.g-gpx{
    box-shadow:0 0 0 1px #BBB;
    text-align:center;
    padding:5px;
    background-color:#eee
}
.g-hm{
    box-shadow:0 0 0 1px #BBB;
    text-align:center;
    padding:5px;
    background-color:#eee
}
.g-divider{
    display:none;
    grid-column:1 / 9
}
.hm{
    display:none
}
.hm2{
    display:none;
    float:left
}
.textbox{
    padding:10px;
    color:#444;
    background-color:#eee;
    border:1px solid #444;
    box-shadow:5px 5px 5px grey
}
@media only screen and (max-width: 420px){
    .asLogo{
        width:30px;
        height:130px;
        content:url("img/as-logo-clipped.webp")
    }
    .linkLogo,.rotateLogo{
        margin-right:3px
    }
}
@media only screen and (max-width: 798px){
    .overskrift{
        padding-top:2px
    }
    .g-header-center{
        display:none
    }
    .g-header-left{
        display:none
    }
    .g-wide{
        grid-column:2 / 9
    }
    .g-gpx{
        grid-column:2 / 3
    }
    .g-hm{
        grid-column:5 / 9
    }
    .hm{
        display:unset
    }
    .hm2{
        display:unset
    }
    .g-divider{
        display:unset;
        grid-column:1 / 9;
        margin:10px
    }
}
body{
    /* animation:fadeIn 1s; */
    background-image:url("img/shoes.webp");
    font-family:verdana;
    color:black;
    background-color:#CCC
}