@charset "UTF-8";
/* CSS Document */

*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}
img{
    width:100%;
    height:auto;
}
#wrapper{
    max-width: 960px;
    margin:0 auto;
    overflow:hidden;
    font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    color:#8b432d;
}
h1{
    text-align: center;
}
main{
    display:grid;
    grid-template:repeat(3, auto)/repeat(3, auto);
    background-color:#000;
}
main img{
    grid-area: 1/1/-1/-1;
}
main div{
    color:rgba(125, 125, 125, 0.7);
    font-size:3em;
    display:none;
}
#left{
    grid-area: 2/1/3/2;
    margin-left:3px;
}
#right{
    grid-area: 2/3/3/4;
    margin-right:3px;
}
#thumbs{
    background-color:#000;
    position:relative;
    /*height:122px;*/
    height:100px;
    /*width:418%;  --  justeret af JavaScript */
}
#thumbs section{
    display:flex;
    position:absolute;
}
#thumbs section div{
    margin:6px;
    /*width:164px;*/
    width:134px;
}
#thumbs img{
    border:solid 1px #FFF;
    cursor:pointer;
}
#indicator{
    position:relative;
    height:3px;
    margin:0.2em 0 0;
    background-color: #8b432d;
}
footer{
    /*border-top:solid 1px #8b432d;*/
    font-size:0.8em;
    padding:0.5em 0 0;
    margin:2em 0 0;
    text-align:center;
}
@media screen and (max-width:959px){
    #thumbs, #indicator{
        display:none;
    }
    main div{
        display:block;
    }
}