@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap');

:root {
    --color-BG: #FFFFFF;
    --color-BG-Card: #333;
    --color-BG-Light: rgba(5, 5, 5, 0.2);
    --color-Input-BG: #EEEEEE;
    --color-text: #000000;
    --font-Regular: "Crimson Pro", serif;
    --font-Menu: "Cormorant Garamond", serif;
    --font-Foot: "Crimson Pro", serif;
    --font-Title: "Cormorant Garamond", serif;
    --fontsize-Title: 4rem;
    --fontsize-Subtitle: 1.5rem;
    --fontsize-Smalltitle: 1.2rem;
    --fontsize-Button: 1.5rem;
    --fontsize-FilmCardTitle: 1.5rem;
    --border-radius: 5px;
    --lg-highlight: rgba(255, 255, 255, 0.15);
    --lg-bg-color: rgba(255, 255, 255, 0.05);
    --glass-blur: 35px;
    --glass-saturation: 100%;
    --glass-opacity: 0.08;
    --border-color: rgba(255, 255, 255, 0.1);
    --fontsize-Button: 0.8em;
}

body {
    font-size: 14pt;
}

/*----------------------------------------------*/
/*-MENU-----------------------------------------*/
/*----------------------------------------------*/

.mud-appbar.mud-appbar-fixed-top {
    background: var(--color-BG) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
    .mud-appbar::before {
        background-image: revert;
    }

.mud-appbar a, .basket-card-item a {
    
}

header.mud-appbar > div:nth-child(1) > a:nth-child(4),
header.mud-appbar > div:nth-child(1) > a:nth-child(5) {
    display: none;
}

/*----------------------------------------------*/
/*-HERO-----------------------------------------*/
/*----------------------------------------------*/

.hero {
    box-shadow: revert;
}

.hero-item::before {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.hero-content {
    color: var(--color-text);
}

    .hero-content .title {
        text-transform: revert;
    }

@media(min-width: 768px) {
    .hero-content {
        max-width: 55%;
    }
}
/*----------------------------------------------*/
/*-SIGNUP---------------------------------------*/
/*----------------------------------------------*/

.zip-button-wrap input#im-in {
    background: var(--color-BG-Light);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

/*----------------------------------------------*/
/*-BLOG EXCERPT---------------------------------*/
/*----------------------------------------------*/

.blog-excerpt {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: solid 1px var(--color-BG-Light);
    width: 100%;
}

/*----------------------------------------------*/
/*-FORM-----------------------------------------*/
/*----------------------------------------------*/

.mud-input > input.mud-input-root-outlined, .mud-input > textarea.mud-input-root-outlined {
    background: var(--color-bg);
}

/*----------------------------------------------*/
/*-BUTTON---------------------------------------*/
/*----------------------------------------------*/

.outline-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    box-shadow: 0 0 0 2px var(--color-BG-Light) inset;
    background: none;
    padding: 1rem 3rem;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    color: var(--color-text);
    text-transform: uppercase;
}

    .outline-button:hover .outline-button__line {
        transform: none;
    }

.outline-button__lines {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.outline-button__line {
    background: var(--color-text);
    position: absolute;
    transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1);
}

.outline-button__line--horizontal {
    width: 100%;
    height: 2px;
    transition-delay: 0.2727272727s;
}

.outline-button__line--vertical {
    width: 2px;
    height: 100%;
    transition-delay: revert;
}

.outline-button__line--top {
    top: 0;
    left: 0;
    transform: translateX(-101%);
}

.outline-button__line--right {
    top: 0;
    right: 0;
    transform: translateY(-100%);
}

.outline-button__line--bottom {
    bottom: 0;
    left: 0;
    transform: translateX(100%);
}

.outline-button__line--left {
    top: 0;
    left: 0;
    transform: translateY(100%);
}