#header {
    display: block;
    margin: 0 0.520833333%;
    padding-top: 1.25em;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    z-index: 1;
}

.header {
    background-color: #F5FCFF80;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 1.5625em;
    display: grid;
    height: 4.4375em;
    grid-template-columns: 10.1578947% 1fr 10.1578947%;
}

.logo {
	grid-row: 1;
	grid-column: 1;
	margin: 0;
    object-fit: contain;
    justify-self: flex-start;
}

.logo-bg {
    margin: 1em 0 0.975em 26.1437908%
}

.top-navigation-container {
	grid-row: 1;
	grid-column: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
    z-index: -1;
}

.top-navigation {
    flex-grow: 1;
    display: flex;
    flex-direction: row;                                
    align-items: center;
    align-self: center;
    justify-content: center;
    column-gap: 16.7391304%;
}

.nav-title {
    font-size: 1em;
    line-height: 1em;
    font-family: Onest;
    font-weight: 300;
}

.menu {
  	display: none;
}

.menu-item-title {
    font-size: 1.875em;
    font-family: AvrileSans-Condensed;
    font-weight: 600;
    font-style: normal;
    line-height: 1em;
    color: #0095DA;
}

@media (max-width: 1024px) {
    .logo {
        width: 34.93333333333333vw;
        height: 33.73px;
    }

    .logo-bg {
        margin:  0.4375em 0 0.579375em;
    }

    #header {
        margin: 0;
        padding: 0;
    }

    .header {
        grid-template-columns: 39.2% 1fr 15.2%;
        border-radius: 0;
        height: 50px;
        padding: 0 4.266666666666667%;
    }

    .top-navigation-container {
        display: none;
    }
  
    .menu {
        display: flex;
        grid-column: 3;
        background-size: contain;
        background-repeat: no-repeat;
        height: 1.25em;
        justify-self: right;
        justify-content: center;
        align-self: center;
    }

    .burger-checkbox {
        position: absolute;
        visibility: hidden;
    }
    .burger {
        cursor: pointer;
        z-index: 1;
        display: block;
        position: relative;
        border: none;
        align-self: center;
        background: transparent;
        width: 6.666666666666667vw;
        height: 1.972685887708649vh;
        margin: 0;
    }
    .burger::before,
    .burger::after {
        content: '';
        left: 0;
        position: absolute;
        display: block;
        width: 100%;
        height: 0.3034901365705615vh;
        border-radius: 10px;
        background: #404348;
    }
    .burger::before {
        top: 0;
        transition: box-shadow .3s .15s, top .3s .15s, transform .3s;
    }
    .burger::after {
        bottom: 0;
        transition: bottom .3s .15s, transform .3s;
    }
    .burger-checkbox:checked + .burger::before {
        top: 0.834597875569044vh;
        transform: rotate(45deg);
        transition: box-shadow .15s, top .3s, transform .3s .15s;
    }
    .burger-checkbox:checked + .burger::after {
        bottom: 0.834597875569044vh;
        transform: rotate(-45deg);
        transition: bottom .3s, transform .3s .15s;
    }

    .menu-list {
        display: grid;
        grid-row: 2;
        grid-template-rows: repeat(5, auto) 1fr;
        gap: 1.3125em;
        margin: 1.25em 4.26666667%;
        padding: 2.5em 0 2.5em 12.53333333%;
        list-style-type: none;
        background: #F4FCFF;
        border-radius: 1.5625em;
        height: -moz-fit-content;
        height: fit-content;
    }

    .nav-menu {
        display: grid;
        grid-template-rows: auto 1fr;
        top: 0;
        left: 0;
        position: absolute;
        padding: 0;
        margin: 0;
        transform: translateX(100%);
        transition: .3s;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .menu-item {
        display: block;
        color: #0095DA;
        text-align: left;
        text-decoration: none;
    }
    .menu-item:hover {
        background: rgba(255,255,255,.2)
    }
    .burger-checkbox:checked ~ .nav-menu {
        transform: translateX(0);
    }

    .burger-logo {
        display: block;
        grid-row: 1;
        grid-column: 1;
        margin: 0.4375em 0 0.6075em 4.26666667%;
        width: 34.93333333333333vw;
    }

    .nav-menu div {
        background: #EAF8FF;
        height: 100vh;
        margin-top: 3.125em;
    }

    .menu-list li {
        height: -moz-fit-content;
        height: fit-content;
    }
}