@import url("https://fonts.googleapis.com/css?family=Raleway:300,400");
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400");
/* common setup */

* {
    box-sizing: border-box;
    font-family: Raleway;
    color: #777;
}

html, body {
    margin: 0;
    padding: 0;
}

ul {
    padding: 0;
}

/* header */

.main-header {
    height: 200px;
    background-color: rgba(0, 0, 0, .6);
    /* background-image: url(images/khalid-main-header.jpg); */
    background-blend-mode: multiply;
    background-size: cover;
    padding-bottom: 30px;
    color: #ffffff;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
}

.colored-header {
    color: rgb(210, 109, 0);
}

.name {
    text-align: center;
    margin: 0;
    font-size: 2em;
    font-weight: normal;
    color: #ffffff;
}

.name-large {
    font-size: 1.6em;
    padding-top: 1em;
}

.section-header {
    font-weight: normal;
    color: #333333;
    text-align: center;
    font-size: 1.6em;
}

p.intro {
    font-size: 1.4em;
    line-height: 140%;
}

/* images */

img {
    display: block;
}

.about-band-image {
    float: left;
    margin: 20px;
    border-radius: 6px;
}

/* footer */

.main-footer {
    background-color: rgba(0, 0, 0, .3);
    padding: .25em 0;
}

.container {
    max-width: 900px;
    min-width: 200px;
    margin: 0 auto;
    padding: 0 1.5em;
}

.name-footer {
    text-align: center;
    margin: 0;
    font-size: 1em;
    font-weight: normal;
    color: #ffffff;
}

.main-footer-container {
    display: flex;
    align-items: center;
}

.main-footer-container ul {
    flex-grow: 1;
    text-align: end;
}

.footer-nav img {
    width: 30px;
    height: 30px;
}