@font-face {
    font-family: "Proxima Nova";
    src: url('../fonts/ProximaNova-Regular.otf') format('opentype'),
    url('../fonts/ProximaNova-Regular.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: "Proxima Nova";
    src: url('../fonts/ProximaNova-Bold.otf') format('opentype');
    font-weight: bold;
}

@font-face {
    font-family: "The Seasons";
    src: url('../fonts/theseasons-reg.otf') format('opentype');
    font-weight: normal;
}

@font-face {
    font-family: "BodoniModa";
    src: url('../fonts/BODONI_MODA/BodoniModa_18pt-Italic.ttf') format('truetype');
    font-weight: normal;
}

/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, a, img, ol, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* In-app overwrites */


/* Page styles */
body {
    min-width: 350px;
    min-height: 100vh;
    /*background-color: #000;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-family: "Proxima Nova", "Times New Roman", serif;
}

header {
    display: block;
    /*border-bottom: 2px solid #D71921;*/
}
section {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin: 0px auto;
     padding: 0 16px;
    max-width: 1200px;
    flex-direction: row;
    align-items: center;
}
.banner {
    width: 250px;
    padding: 0 1px;
    display: block;
}
.search {
    max-width: 320px;
    max-height: 64px;
    display: block;
}
#app-wrapper {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-bottom: 3em;
}


footer {
    width: 100%;
    color: #ffffff;
    background-color: #000000;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 0 25px 0;
    align-items: center;
    /*border-top: 3px solid #ba131d;*/
}

.footerText {
    font-size: 12px;
}
.footerText a:link, .footerText a:visited {
    color: #FFFFFF;
    text-decoration: none;
}

.footerText a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.social-icons-list {
    list-style: none;
    display: flex;
    gap: 8px;
}
.social-icons-list img {
    max-height: 40px;
    max-width: 40px;
}
.leftFooter {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.searchIcon {
    max-width: 45px;
    max-height: 45px;
    display: none;
    border: 1px solid #453536;
    border-radius: 3px;
}
.dotterLogoMobile {
    max-width: 25px;
    max-height: 25px;
}
.dotterLogo {
    max-width: 80px;
    display: none;
}
.dotterLogoFooter a {
    align-items: center;
    display: flex;
    font-size: 11px;
    line-height: 12px;
    gap: 8px;
    text-align: right;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

@media screen and (max-width: 600px) {
    #app-wrapper {
        width: 100%;
    }
    section {
        justify-content: space-between;
    }
    .searchIcon {
        display: block;
    }
    .dotterLogoMobile {
        display: block;
    }
    .dotterLogo {
        display: none;
    }
    footer {
    }
    .social-icons-list img {
        max-height: 30px;
        max-width: 30px;
    }
    .search {
        display: none;
    }
    .row.of-three, .row.of-five {
        grid-template-columns: repeat(1, 1fr);
    }
}