@font-face {
    font-family: 'Wallie';
    src: url('../fonts/Wallie-Chunky.woff2') format('woff2'),
        url('../fonts/Wallie-Chunky.woff') format('woff'),
        url('../fonts/Wallie-Chunky.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Wallie';
    src: url('../fonts/Wallie-Fit.woff2') format('woff2'),
        url('../fonts/Wallie-Fit.woff') format('woff'),
        url('../fonts/Wallie-Fit.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Vegan';
    src: url('../fonts/VeganStylePersonalUse.woff2') format('woff2'),
        url('../fonts/VeganStylePersonalUse.woff') format('woff'),
        url('../fonts/VeganStylePersonalUse.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* { 
    -webkit-box-sizing: border-box; 
            box-sizing: border-box; 
    font-family: 'Wallie', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

html, body { margin: 0; padding: 0; border: 0; }

html {
    font-size: 1.5vw;
}

a {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.flex-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

.flex-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.no_display {
    display: none;
}

.message {
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, .75);
    color: #fff;
    position: fixed;
    top: 2rem;
    right: 2rem;
    font-size: 1rem;
    border-radius: 1rem;
    z-index: 9999;
    max-width: 30rem;
}

section {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

    section.over {
        z-index: 1;
    }

.title {
    font-weight: bold;
}

    .title.small {
        font-size: 1.6rem;
        color: #3D3B3E;
    }

    .title.big {
        background: -webkit-gradient(linear, left top, right top, from(#FFC070), color-stop(0%, #FFC070), to(#FFDC4C));
        background: -webkit-linear-gradient(left, #FFC070, #FFC070 0%, #FFDC4C 100%);
        background: -o-linear-gradient(left, #FFC070, #FFC070 0%, #FFDC4C 100%);
        background: linear-gradient(to right, #FFC070, #FFC070 0%, #FFDC4C 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 2.6rem;
        color: #FFC070;
    }

.subtitle {
    margin: 0;
}

    .subtitle span {
        color: #FFC070;
        font-weight: bold;
    }

.half-moon {
    position: absolute;
    top:0; left:0;
    z-index: -1;
    transform: scaleY(0.75);
    transform-origin: top;
}

.button {
    border-radius: 20vw;
    outline: none;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    text-align: center;
}

    .button.gradient {
        background: -webkit-gradient(linear, left top, right top, from(#FFC070), color-stop(0%, #FFC070), to(#FFDC4C));
        background: -webkit-linear-gradient(left, #FFC070, #FFC070 0%, #FFDC4C 100%);
        background: -o-linear-gradient(left, #FFC070, #FFC070 0%, #FFDC4C 100%);
        background: linear-gradient(to right, #FFC070, #FFC070 0%, #FFDC4C 100%);
        color: #fff;
        font-weight: bold;
        -webkit-box-shadow: 5px 2.5px 0.77rem rgba(0, 0, 0, .1);
                box-shadow: 5px 2.5px 0.77rem rgba(0, 0, 0, .1); 
    }

        .button.gradient:hover {
            background: -webkit-gradient(linear, left top, right top, from(#FFDC4C), color-stop(0%, #FFDC4C), to(#FFC070));
            background: -webkit-linear-gradient(left, #FFDC4C, #FFDC4C 0%, #FFC070 100%);
            background: -o-linear-gradient(left, #FFDC4C, #FFDC4C 0%, #FFC070 100%);
            background: linear-gradient(to right, #FFDC4C, #FFDC4C 0%, #FFC070 100%);
        }

    .button.normal {
        background: transparent;
        -webkit-box-shadow: inset 0 0 0 0.15rem #FFC070;
                box-shadow: inset 0 0 0 0.15rem #FFC070;
    }

        .button.normal:hover {
            background: -webkit-gradient(linear, left top, right top, from(#FFDC4C), color-stop(0%, #FFDC4C), to(#FFC070));
            background: -webkit-linear-gradient(left, #FFDC4C, #FFDC4C 0%, #FFC070 100%);
            background: -o-linear-gradient(left, #FFDC4C, #FFDC4C 0%, #FFC070 100%);
            background: linear-gradient(to right, #FFDC4C, #FFDC4C 0%, #FFC070 100%);
            -webkit-box-shadow: none;
                    box-shadow: none;   
        }

    .button.no-wrap {
        white-space: nowrap;
    }

/*  Menu  */
.menu {
    align-items: center;
}

    .menu .menu_hamburguer {
        width: 1.25rem;
    }

    .menu .menu_entries {
        margin-left: auto;
        display: flex;
        align-items: center;
    }

        .menu .menu_entries .right {
            color: #fff;
            display: flex;
            align-items: center;
        }

        .menu .menu_entries a,
        .menu .menu_entries span
        {
            color: inherit;
            cursor: pointer;
            text-decoration: none;
        }

/*  Mobile Menu  */
.mobile_menu {
    opacity: 0;
    transform: translateX(-100%);
    position: fixed;
    top: 0; left: 0;
    height: 100%;
    background: rgba(61, 59, 62, 0.95);
    transition: opacity ease-in-out 0.5s,
                transform ease-in-out 0.5s;
    z-index: 9999;            
    font-size: 1rem;
    overflow-x: hidden;
}

    .mobile_menu.show {
        opacity: 1;
        transform: translateX(0);
    }

    .mobile_menu .head {
        background: rgba(61, 59, 62, 1);
        color: #fff;
        font-weight: bold;
        align-items: center;
        padding: 1.5rem;
        padding-left: 2.5rem;
    }

        .mobile_menu .head img {
            margin-left: auto;
        }

    .mobile_menu a {
        padding: 1.5rem;
        border-bottom: 3px solid #fff;
        text-align: center;
        color: #fff;
        transition: background-color ease-in-out 0.22s;
    }

        .mobile_menu a:hover {
            background-color: rgba(255, 255, 255, 0.25);
        }

/*  Footer  */
.footer {
    position: relative;
    overflow: hidden;
    align-items: center;
    padding-top: 35vh;
    background: linear-gradient(to bottom, #fff, #fff 50%, #3D3B3E 50%);
    margin-top: -85vh;
    z-index: 0;
}

/* SVGs */
    
    .footer .white_background {
        position: relative;
        z-index: 2;
    }

    .footer .dashes {
        position: absolute;
        bottom: 0; left: 0;
    }

    .footer .social {
        position: absolute;
        z-index: 2;
        cursor: pointer;
    }

        .footer .social img {
            margin-right: 2vw;
        }

    .footer .hexagons {
        position: absolute;
        bottom: 0; left: 0;
        z-index: 1;
    }    

    .footer .hexagon {
        position: absolute;
    }

/********/

    .footer .logo {
        transform: translateY(-50%);
        z-index: 4;
    }    

    .footer .copyright {
        font-size: 2rem;
        color: #fff;
        font-family: 'Vegan';
        margin-top: -5.5vh;
        transform: translate(-5%, 5%);
        z-index: 2;
    }

        .footer .copyright .first {
            font-family: 'Wallie';
            font-weight: bold;
        }

        .footer .copyright .second {
            font-family: inherit;
            color: #FFC070;
        }
            
    .footer .text {
        position: absolute;
        align-items: center;
        z-index: 3;
        top: 0;
        line-height: 1.75rem;
        width: 70%;
    }

        .footer .text .row {
            align-items: center;
        }

            .footer .text .row .title.small span{
                color: #FFC070;
            }

            .footer .text .row .paragraph{ 
                text-align: center;
            }

    .footer .menu {
        position: absolute;
        align-items: flex-end;
        color: #fff;
        z-index: 2;
    }

        .footer .menu span {
            font-size: 1rem;
            margin-top: 1vh;
            cursor: pointer;
        }
        
        .footer .menu b {
            color: #FFC070;
        }