html {
    overflow-y:scroll;
}

html, body {
    height: 100%;
}

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12pt;
    background: url("../assets/background.jpg");
}

.folder {
    background: white;
}

@media (max-width: 978px) {
    .folder {
        margin-top: 0px;
    }
}

.textcol {
    padding: 2em 3.2em;
}

h1, h2, h3 {
    color: #404273;
}

h1 {
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.photobox, .textbox {
    background: #F5F7F6;
}

.photobox {
    text-align: center;
    margin-bottom: 2em;
}

#foto-janny {
    width: 45%;
}

.textbox {
    padding: 3em;
}

.linkbox {
    text-align: right;
    margin-bottom:1em;
}

a {
    font-style: italic;
    color: #404273;

}

a:hover, a:focus {
    text-decoration-style: solid;
    text-decoration-color: #404273;
}

[class*="col-"] {
    padding: 0em;
}

#repertoire tr th {
    border: none;
    color: #404273;
}

@media (min-width: 978px) {
    .row {
        display: table;
    }

    [class*="col-"] {
        float: none;
        display: table-cell;
        vertical-align: top;
    }
}

@media (min-width: 978px) {
    #russelbox {
        padding-top: 120px;
    }

    .photobox-big {
        margin-top:7em;
    }

    #repertoire {
        margin-top:1.5em;
    }
}

@media (min-width: 978px) {
    .textbox {
        position: absolute;
        bottom: 2em;
        right: 0px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 24pt;
    }
}

.asterisk {
    font-size: small;
    margin-left:0.2em;
}

audio {
    width: 100%;
}