body {
    background: white;
    background-color: rgb(223, 236, 222);

    font-family: "Raleway", "Helvetica Neue", sans-serif;
    font-weight: 200;
    font-size: 14pt;
    font-style: normal;

    margin: 0;  
}

.container {

    margin: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;

    max-width: 100%;


}

.topBanner {
    background-image: url("images/BandBackground.jpg");
    background-size: cover;
    background-position: center;


    width: 100%;
    height: 1200;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;

    box-shadow: 0 -60px 28px -20px rgba(0, 0, 0, 0.56) inset;
}

.mainElement {
    flex: 40%;
    height: 600px;
    padding: 3%;

    color: white;
    font-size: 1.2em;
}

.footerElement {
    font-size: 1.8em;
    text-align: center;
    flex: 100%;
    padding: 3em;
    color: white;

    background-color: rgb(90,90,90, 0.7);
}


.elementContainer {
    height: 100%;

    display: flex;

    flex-flow: column;
    justify-content: space-between;
    align-items: center;
}

.greenElement {
    background: rgb(202,172,156);
    background: linear-gradient(135deg, rgba(202,172,156,1) 0%, rgba(72,112,123,1) 100%);
}


.green2Element {
    background: rgb(202,172,156);
    background: linear-gradient(135deg, rgba(202,172,156,1) 0%, rgba(72,112,123,1) 100%);
    /* background: linear-gradient(225deg, rgba(202,172,156,1) 0%, rgba(72,112,123,1) 100%); */
}

.purpleElement {
    background: rgb(153,104,141);
    background: linear-gradient(227deg, rgba(153,104,141,1) 0%, rgba(82,75,79,1) 100%);
}

.orangeElement {
    background: #C7907E;
    background: linear-gradient(135deg, #c7917f 0%, #835d82 100%);
}


.orange2Element {
    background: #C7907E;
    background: linear-gradient(135deg, #c7917f 0%, #835d82 100%);
    /* background: linear-gradient(225deg, hsla(15, 39%, 64%, 1) 0%, hsla(302, 17%, 44%, 1) 100%); */
}

/** sub elements **/

.topLogo {
    height: 580px;
}

.topLabel {
    color: white;
    font-size: 2em;
    font-weight: 300;
    text-shadow: 0px 0px 4px black
}

.elementTop {
    text-align: center;
    margin-bottom: 1em;
}

.elementMedia {
    text-align: center;
}

.elementMedia .playButton {
    transition: transform 0.3s ease-in-out;
}

.elementMedia:hover .playButton{
    transform: scale(1.3);
}

.elementTop p {
    margin:0.5em;
}

.elementTop p:first-child {
    font-size: 1.6em;
    font-weight: 300;
}


.playButton {
    height: 50px;
}

.elementImage {
    height: 400px;
    width: auto;
    border-radius: 6px;
    box-shadow: 0px 0px 8px 5px rgb(56, 56, 56,0.39);
}

.footerElement a {
    font-weight: 300;
    color: rgb(139, 246, 213);
    text-decoration: none;
}

.footerElement a:hover {
    color: rgb(96, 255, 205);
    text-decoration: underline;
}


/* ANIMATION */

.topLogo, .topLabel {

    animation-name: appear;
    animation-duration: 3s;
    animation-delay: 0.5s;
    animation-fill-mode: backwards;
    animation-timing-function: ease;
    animation-iteration-count: 1;
}

.topLabel {
    animation-delay: 2s;
    animation-duration: 1s;
}


@keyframes appear {
    0% {opacity: 0;
        transform: translateY(2em);}
    100% {opacity: 1;
        transform: translateY(0);}
}



/* Phone Portait */
@media screen and (max-width: 1600px) {
    .topBanner {
        height: 900px;
    }

    body {
        font-size: 12pt;
    }

    .topLogo {
        height: 400px;
    }

    .mainElement {
        height: 500px;
        padding: 4%;
    }

    .elementImage {
        height: 300px;
    }

}


/* Phone Portait */
@media screen and (max-width: 900px) {
    .topBanner {
        height: 600px;
    }

    .topLogo {
        height: 300px;
    }
}


/* Phone Portait */
@media screen and (max-width: 600px) {
    .topBanner {
        height: 500px;
        background-position: 57%;
    }

    .topLogo {
        height: 250px;
    }


    .topLabel {
        font-size: 1.5em;
    }


    .mainElement {
        height: 100%;
        padding: 4%;
        flex: 100%;
    }

    .elementImage {
        width: 88%;
        height: auto;
    }

    .footerElement {
        font-size: 1.4em;
    }
}


@media screen and (max-width: 500px) {

    body {
        font-size: 10pt;
    }

    .topBanner {
        height: 380px;
    }

    .topLogo {
        height: 170px;
    }


    .mainElement {
        height: 100%;
        padding: 4%;
        flex: 100%;
    }

    .elementImage {
        width: 90%;
        height: auto;
    }
}