/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */

/* ==============================
   FONT IMPORTS
================================= */
@font-face {
    font-family: "ITCErasStd-Light";
    src:
        url(https://democogroup.com/themes/custom/dg/eras/Fonts/1557614/8d9b482d-8151-4821-8634-3bc449ae8859.woff2)
            format("woff2"),
        url(https://democogroup.com/themes/custom/dg/eras/Fonts/1557614/a142c1b7-3d46-4eab-b78f-af0ff7f4e6b7.woff)
            format("woff");
}

@font-face {
    font-family: "ITCErasStd-Book";
    src:
        url(https://democogroup.com/themes/custom/dg/eras/Fonts/1557616/adb64468-e3dc-43b0-acdc-4bcb7b107cad.woff2)
            format("woff2"),
        url(https://democogroup.com/themes/custom/dg/eras/Fonts/1557616/00435958-8591-48cb-b929-2f13fccbfaed.woff)
            format("woff");
}

@font-face {
    font-family: "ITCErasStd-Medium";
    src:
        url(https://democogroup.com/themes/custom/dg/eras/Fonts/1557618/bb66e5cb-7e43-4994-8364-f37b5335641f.woff2)
            format("woff2"),
        url(https://democogroup.com/themes/custom/dg/eras/Fonts/1557618/7efe9a23-7ca5-455b-be56-890b568f543c.woff)
            format("woff");
}

@font-face {
    font-family: "ITCErasStd-Demi";
    src:
        url(https://democogroup.com/themes/custom/dg/eras/Fonts/1557620/024f1a58-d8d9-4491-a7eb-d82827254d5b.woff2)
            format("woff2"),
        url(https://democogroup.com/themes/custom/dg/eras/Fonts/1557620/4a920461-0a93-4681-973d-acbefa1714a4.woff)
            format("woff");
}

@font-face {
    font-family: "ITCErasStd-Bold";
    src:
        url(https://democogroup.com/themes/custom/dg/eras/Fonts/1557622/5f04d5ef-1177-417b-ba37-ecca14afc51d.woff2)
            format("woff2"),
        url(https://democogroup.com/themes/custom/dg/eras/Fonts/1557622/996ac1fc-f526-430f-a89a-bd3e3fdda841.woff)
            format("woff");
}

@font-face {
    font-family: "ITCErasStd-Ultra";
    src:
        url(https://democogroup.com/themes/custom/dg/eras/Fonts/1557624/cc738d1d-bd9e-4e08-acad-262e5413962b.woff2)
            format("woff2"),
        url(https://democogroup.com/themes/custom/dg/eras/Fonts/1557624/6c69b0e0-f404-4990-a249-03fce46b080b.woff)
            format("woff");
}

@font-face {
    font-family: "Icons";
    src: url(https://democogroup.com/themes/custom/dg/open-iconic/font/fonts/open-iconic.eot);
    src:
        url(https://democogroup.com/themes/custom/dg/open-iconic/font/fonts/open-iconic.eot#iconic-sm)
            format("embedded-opentype"),
        url(https://democogroup.com/themes/custom/dg/open-iconic/font/fonts/open-iconic.woff) format("woff"),
        url(https://democogroup.com/themes/custom/dg/open-iconic/font/fonts/open-iconic.ttf) format("truetype"),
        url(https://democogroup.com/themes/custom/dg/open-iconic/font/fonts/open-iconic.svg#iconic-sm) format("svg");
    font-weight: normal;
    font-style: normal;
}

/* ==============================
   ROOT VARIABLES
================================= */
:root {
    --primary: #e07040;
    --secondary: #ea5b25;
    --success: #a2c617;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #d60b52;
    --light: #f8f9fa;
    --dark: #343a40;

    --gray: #e9e9e9;
    --gray-dark: #d3d3d2;

    --white: #fff;
    --black: #000;

    /* Breakpoints */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    /* Typography */
    --font-primary: "ITCErasStd-Light", Helvetica, Arial, sans-serif;
    --font-size-base: 18px;
    --line-height-base: 1.6;

    --font-bold: "ITCErasStd-Demi", Helvetica, Arial, sans-serif;
}

/* ==============================
   BASE STYLES
================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
    color: var(--dark);
    background-color: var(--light);
    line-height: var(--line-height-base);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

.bold-font {
    font-family: var(--font-bold);
    font-weight: 700;
}

h1 {
    font-size: 3rem;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--primary);
    font-family: var(--font-bold);
}

.logo {
    width: 316px;
    align-self: flex-start;
}

/* ==============================
   HEADER
================================= */
header {
    width: 90%;
    max-width: 1200px;
    text-align: center;
    padding: 20px;
    color: var(--gray-dark);
    display: flex;
    justify-content: flex-start;
}

/* ==============================
   MAIN CONTENT
================================= */
main {
    max-width: 1200px;
    width: 90%;
    min-height: 80vh;
    padding: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.image-gallery {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    row-gap: 1rem;
    column-gap: 1ch;
    margin: 3rem 0;
}

.image-gallery img {
    aspect-ratio: 1;
    object-fit: cover;
    width: calc(24% - 1ch);
}

@media screen and (max-width: 578px) {
    .image-gallery img {
        width: 45%;
    }
}

@media screen and (max-width: 578px) {
    .image-gallery img {
        min-width: 0;
    }
}

/* ==============================
   FOOTER
================================= */
footer {
    width: 100%;
    padding: 20px 0 0;
    text-align: center;
    background-color: var(--gray);
    color: var(--black);
    bottom: 0;
}

footer a {
    color: var(--dark);
    font-size: 0.8rem;
    text-decoration: none;
    margin-right: 2ch;
}

.disclaimers {
    display: flex;
    justify-content: flex-end;
    background-color: var(--gray-dark);
    padding: 0.5rem 0;
    margin-top: 2rem;
}

/* ==============================
   RESPONSIVE DESIGN
================================= */
@media screen and (max-width: 980px) {
    h1 {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 1.5rem;
    }
}