﻿body {
    margin: 0px;
}

.hidden {
    display: none;
}

@font-face {
    font-family: 'DidactGothic';
    src: url(../../newfont/didactgothic-webfont.woff2) format('woff2');
}

.headerContainer {
    background-color: #0f0f0f;
    position: fixed;
    width: 100%;
    height: 150px;
    top: 0px;
}

.sectionContainer {
    background-color: #fff;
    margin-top: 150px;
}

.headerContent {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.headerTextMainContent {
    font-size: 1.8em;
    margin-top: 10px;
    color: darkgray;
    text-align: center;
    font-family: sans-serif;
}

.brandingContent {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 50px;
}

.brandingContent-row1,
.brandingContent-row2,
.brandingContent-row3 {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 50px;
}

.brandingImg-1 {
    background-image: url(../../testimage/images/underconstruction/sing-on-any-device-copy.png);
    background-size: cover;
    background-position: center;
    aspect-ratio: 300/300;
    max-width: 300px;
    width: 250px;
    height: 250px;
}

.brandingImg-2 {
    background-image: url(../../testimage/images/underconstruction/100-digital.png);
    background-size: cover;
    background-position: center;
    aspect-ratio: 300/300;
    max-width: 300px;
    width: 250px;
    height: 250px;
}

.brandingImg-3 {
    background-image: url(../../testimage/images/underconstruction/celebrity-judges.png);
    background-size: cover;
    background-position: center;
    aspect-ratio: 300/300;
    max-width: 300px;
    width: 250px;
    height: 250px;
}

.brandingImg-4 {
    background-image: url(../../testimage/images/underconstruction/awards-and-prizes.png);
    background-size: cover;
    background-position: center;
    aspect-ratio: 300/300;
    max-width: 300px;
    width: 250px;
    height: 250px;
}

.brandingImg-5 {
    background-image: url(../../testimage/images/underconstruction/album-singer.png);
    background-size: cover;
    background-position: center;
    aspect-ratio: 300/300;
    max-width: 300px;
    width: 250px;
    height: 250px;
}

.brandingImg-6 {
    background-image: url(../../testimage/images/underconstruction/ger-noticed.png);
    background-size: cover;
    background-position: center;
    aspect-ratio: 300/300;
    max-width: 300px;
    width: 250px;
    height: 250px;
}

.brandingTextContent {
    width: 100%;
    clear: both;
    margin-top: 10px;
    font-size: 0.85em;
    text-align: center;
    font-family: sans-serif;
    font-size: 0.9em;
    color: #f8f8f8;
}

.footerContentText {
    max-width: 900px;
    text-align: center;
    margin: 0 auto;
    padding: 20px;
}

.footerMainContent {
    color: #333;
    padding: 4px;
    font-size: 1.1em;
    line-height: 30px;
    font-family: sans-serif;
}

.footerMoreContent {
    color: #333;
    padding-top: 10px;
    line-height: 30px;
    font-size: 1em;
    font-family: sans-serif;
}

    .footerMoreContent .contentText a {
        color: #333;
        font-weight: 700;
        text-decoration: none;
    }

@media (max-width: 599px) {
    .brandingContent-row1,
    .brandingContent-row2,
    .brandingContent-row3 {
        flex-direction: column;
    }

    .brandingImg-1,
    .brandingImg-3,
    .brandingImg-5 {
        margin-bottom: 50px;
    }
}
