@charset "UTF-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
}
p{
    padding-bottom:1em;
}
img, audio{
    width:100%;
}
#wrapper{
	max-width:1280px;
	margin:0 auto 2em;
    padding:0 5px;
	font-family: 'Lemonada', cursive;
    display:grid;
    /* right column start linjer: 1 ProgressBar, 2 Audio, 3 Info , 4 Play */
    grid-template: 10px 2em auto 2em/ 3fr 1fr;
}
/* Both columns: */
#progress{
    grid-area: 1/1/2/-1;
	border:solid 1px #BBB;
	height:4px;
	width:100%;
	margin:2px 0 auto;
    box-sizing:border-box;
}
#bar{
	background-color:#CEB18A;
	height:2px;
	width:0%;
}
/* Left column: */
h1{
    grid-area: 2/1/3/2;
	font-size:1.5em;
	margin: 0.6rem 0 0;
	text-align:center;
    padding:0 0 0.4em;
    line-height:1.0;
}
#kortet{
    grid-area: 3/1/-1/2;
}
/* Right column: */
audio{
    grid-area: 2/2/3/-1;
    display:none;
}
#info{
    grid-area: 3/2/4/3;
    padding-top:2em;
    text-align:center;
    line-height:1.2;
}
button{
    grid-area: 4/2/5/-1;
	margin:0.4rem 20% 0;
	cursor:pointer;
	font-family: 'Lemonada', cursive;
    line-height:1.0;
    padding:0.2rem 0 0; 
}

#startPhoto{
    grid-area: 4/2/5/3;
    text-align: center;
}
#startPhoto img{
    width:50%;
    height:auto;
    margin-bottom:1em;
}
.small{
    font-size:0.85rem;
    
}
b{
    color:#00b400;
}
i{
    font-style:italic;
}
.green{
    color:#00B400;
}
.red{
    color:#FF0000;
}

@media screen and (max-width:960px){
    #wrapper{
        /*grid-template: 10px repeat(2, 2em) auto repeat(2, 2em)/ 3fr 2fr;*/
    }
    h1{
        font-size:1.3em;
    }
    #info{
        font-size:0.85em;
        padding-top:1em;
    }
    audio{
        height:100%;
    }
}
@media screen and (max-width:640px){
    #wrapper{
        /* vertical: bar, h1, Audio, Info, Map, Play*/
        /*grid-template: repeat(8, auto) / 1fr;*/
        grid-template: 10px 2em 2em auto auto 2em/ 1fr;
        padding:0 8px;
    }
    h1{
        grid-area: 2/1/3/-1;
    }
    audio{
        grid-area: 3/1/4/-1;
    }
    #info{
        grid-area: 4/1/5/-1;
    }
    #kortet{
        grid-area: 5/1/6/-1;
    }
    button{
        grid-area: 6/1/7/2;
    }
    #info>div{
        max-width:500px;
        text-align:center;
        margin:0 auto;
    }
}
/* fade: */
.fade{
    color:#999;
	-webkit-animation: mymove 1.5s linear infinite; /* Chrome, Safari, Opera */
    animation: mymove 1.5s linear infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    50% {opacity: 0;}
}
/* Standard syntax*/ 
@keyframes mymove {
    50% {opacity: 0;}
}