:root {
    /* Backgrounds */
    --main-color: #0e1927;
    --accent-color: #e6c9a2;

    /* Text */
    --text-color: #fff;

    /* Fonts */
    --font-family-title: "Gloock", sans-serif;
    --font-family-body: "DM Sans", sans-serif;

    /* Theme images */
    --header-hero: url('/assets/custom/images/brasserie-de-aanleg.jpg');
}

/****************
*   Elements    *
*****************/

/* Text */
html {
    font-size: 16px;
    font-family: var(--font-family-body);
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-family-title);
    font-weight: 800;
}

@media only screen and (max-width: 500px) {
    h1 {
        font-size: 3.8rem;
    }

    h2 {
        font-size: 3.2rem;
        margin: 1.47rem 0 1.424rem 0;
    }

}

/* Container */
@media only screen and (min-width: 993px) {
    .container {
        width: 85%;
        max-width: 1480px;
    }
}

/* Buttons */
.btn {
    background-color: unset;
    box-shadow: unset;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    box-sizing: content-box;
    transition: .2s ease-in-out;

    &:hover {
        background-color: var(--accent-color);
        color: var(--main-color);
    }
}

.btn.secondary {
    background-color: var(--accent-color);
    color: var(--main-color);

    &:hover {
        border: 1px solid var(--accent-color);
        color: var(--accent-color);
        background-color: #fff;
    }
}

.btn.secondary.blue {
    background-color: unset !important;
    color: var(--main-color);
    border: 1px solid var(--main-color);

    &:hover {
        background-color: var(--main-color) !important;
        color: var(--accent-color)
    }
}

/* Content subtitle */
span.subtitle {
    position: relative;
    letter-spacing: 3px;
    text-transform: uppercase;

    &.left-trail:before,
    &.right-trail:after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 75px;
        height: 1px;
        background-color: var(--accent-color);
    }

    &.left-trail:before{
        right: -80px;
    }

    &.right-trail:after {
        left: -80px;
    }

}

/* Tabs */
ul.tabs {
    background-color: unset;

    & li.tab, .tab.disabled {

        & a {
            color: #fff;
            font-family: var(--font-family-title);

            &.active {
                color: var(--accent-color)
            }

            &:focus {
                background-color: unset;
            }
        }
    }

    & li.indicator {
        background-color: var(--accent-color);
    }
}

/* Input fields */
input,textarea {
    box-sizing: border-box !important;
    border: 1px solid var(--accent-color) !important;
    padding-left: 15px !important;
    color: var(--text-color);

    &:focus {
        box-shadow: unset !important;
    }

    &::placeholder {
        color: #fff;
        opacity: 0.8;
    }

}

/* Checkbox */
[type="checkbox"]+span:not(.lever) {
    color: var(--text-color);
}

input[type="checkbox"]+span:not(.lever):before {
    border: 2px solid var(--accent-color);
}

/* Sections */
footer {
    background-color: var(--main-color);
    padding: 50px 0;

    & div.container {
        color: #fff;

        & img {
            width: 100%;
            max-width: 200px;
            margin-bottom: 20px;
        }

        & p.socials {

            & a {
                display: inline-block;
                color: #fff;
                margin-right: 15px;

                & i {
                    font-size: 20px;
                    width: 40px;
                    line-height: 38px;
                    height: 40px;
                    text-align: center;
                    border-radius: 100%;
                    border: 1px solid var(--accent-color);
                }
            }
        }

        & h5 {
            position: relative;
            z-index: 1;
            margin-bottom: 40px;

            &:after {
                content: '';
                position: absolute;
                left: -2px;
                bottom: 0;
                height: 2px;
                width: 45px;
                background-color: var(--accent-color);
                z-index: -1;
            }
        }

        & div.input-wrapper {
            position: relative;

            &p {
                margin-top: 10px;
            }

            & i {
                position: absolute;
                right: 15px;
                line-height: 49px;
                height: 100%;
            }
        }

        & div.subfooter {
            border-top: 2px solid var(--accent-color);
            padding-top: 15px;
            color: var(--accent-color);


            @media only screen and (max-width: 600px) {
                & div.left,
                & div.right {
                    display: block;
                    float: unset !important;
                }
                & div.right {
                    margin-top: 15px;
                }
            }

            & a {
                color: var(--text-color);
            }
        }

    }

    & div#cta-button {
        z-index: 5;
        position: fixed;
        bottom: 25px;
        right: 25px;
        border-radius: 50%;
        border: 20px solid var(--accent-color);

        & div.inner {
            z-index: 1;

            & svg {
                position: absolute;
                animation: spin 20s linear infinite;

                & text {
                    font-family: var(--font-family-title);
                    fill: var(--accent-color);
                    text-transform: uppercase;
                    letter-spacing: 1.5px;
                }

            }

            & i {
                padding: 15px;
                background-color: var(--accent-color);
                color: var(--main-color);
                font-size: 42px;
                border-radius: 50px;
                z-index: 2;
                position: relative;
            }
        }

        & div.outer-bg {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: var(--main-color);
            top: 0;
            border-radius: 50%;
            transform: scale(1.5);
            z-index: -1;
        }

    }

}

@keyframes spin {
    from {
        transform: scale(2.5) rotate(0deg);
    }
    to {
        transform: scale(2.5) rotate(360deg);
    }
}