.navbar
{ width: 100%; height: auto; padding: 0; top: 0; z-index: 9999; position: relative; margin-bottom: 0px; }

.navbar .navbar-container
{ width: 100%; height: 70px; padding: 0; top: 0; z-index: 9999; position: fixed; background-image: linear-gradient(to right, #232f95, #0a0a0a); display: grid; grid-template-columns: 222px auto; padding-left: 30px; }

.navbar .navbar-container .logo
{ width: 222px; height: 70px; position: relative; }

.navbar .navbar-container .logo img
{ object-fit: cover; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); }

.navbar .navbar-container .items
{ width: 100%; height: auto; z-index: 999; display: grid; grid-template-columns: auto auto auto auto auto; padding-left: 20%; padding-right: 15px; }

.navbar .navbar-container .items .item
{ width: auto; height: 70px; display: flex; justify-content: center; position: relative; }

.navbar .navbar-container .items .item a
{ color: white; background-size: 100%; -webkit-background-clip: text; text-transform: uppercase; font-weight: 700; font-size: 15px; padding: 1px; text-align: center; text-decoration: none; outline: none; position: absolute; top: 50%; transform: translateY(-50%); }

.navbar .navbar-container .panel
{ width: 35px; height: 30px; margin-top: 20px; margin-right: 20px; top: 0; right: 0; position: absolute; display: none; }

.navbar .navbar-container .panel .bars
{ width: 100%; height: 4px; background-color: white; border-radius: 50px; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); transition: .2s; transition-timing-function: linear; }

.navbar .navbar-container .panel .bars::before
{ content: ''; width: 100%; height: 4px; background-color: white; border-radius: 50px; position: absolute; margin-top: -11px; transition: .2s; transition-timing-function: linear; }

.navbar .navbar-container .panel .bars::after
{ content: ''; width: 100%; height: 4px; background-color: white; border-radius: 50px; position: absolute; margin-top: 11px; transition: .2s; transition-timing-function: linear; }

.navbar #panel { display: none; }

.navbar input[id="panel"] 
{ display: none; } 
 
.navbar #panel:checked + .navbar-container .items 
{ transform: scaleY(100%); transition: .4s; transition-timing-function: linear; margin-top: 0%; }

.navbar #panel:checked + .navbar-container .panel .bars 
{ background-color: rgba(255, 255, 255, 0); }

.navbar #panel:checked + .navbar-container .panel .bars::before 
{ margin-top: 0px; transform: rotate(45deg); transition: .2s; transition-timing-function: linear; }

.navbar #panel:checked + .navbar-container .panel .bars::after 
{ margin-top: 0px; transform: rotate(-45deg); transition: .2s; transition-timing-function: linear; }

.marker
{ position: absolute; width: 1px; height: 1px; background-color: #5c5c5c00; }

@media screen and (min-width:0px) and (max-width:299px) 
{
    .navbar
    { height: 70px; }
    
    .navbar .navbar-container
    { grid-template-columns: auto; padding-left: 0px; padding-top: 80px; padding-right: 30px; }

    .navbar .navbar-container .logo
    { width: 75%; height: 70px; position: absolute; top: 0; margin-left: 10px; margin-top: 4px; }

    .navbar .navbar-container .items
    { width: 100vw; padding-left: 0%; padding-right: 0px; grid-template-columns: auto; border-radius: 0px 0px 15px 15px; transform: scaleY(0%); transition: .4s; transition-timing-function: linear; transform-origin: top; background-image: linear-gradient(to right, #232f95cc, #0a0a0acc); }

    .navbar .navbar-container .panel
    { display: block; margin-top: 25px; margin-right: 10px; z-index: 999; transform: scale(85%); }

    .marker
    { margin-top: -70px; }
}
@media screen and (min-width:300px) and (max-width:394px) 
{
    .navbar .navbar-container
    { height: auto; grid-template-columns: auto; padding-left: 0px; padding-top: 70px; position: relative; }

    .navbar .navbar-container .logo
    { width: 222px; height: 70px; position: absolute; margin-left: 120px; transform: translateX(-50%); top: 0; }

    .navbar .navbar-container .items
    { padding-left: 0; padding-right: 0; grid-template-columns: auto; margin-top: -100%; transform-origin: top; transform: scaleY(0%); transition: .4s; transition-timing-function: linear; }

    .navbar .navbar-container .items .item
    { width: auto; height: 50px; display: flex; justify-content: center; position: relative; }

    .navbar .navbar-container .panel
    { display: block; }

    .marker
    { margin-top: 0px; }
}
@media screen and (min-width:395px) and (max-width:649px) 
{
    .navbar .navbar-container
    { height: auto; grid-template-columns: auto; padding-left: 0px; padding-top: 70px; position: relative; }

    .navbar .navbar-container .logo
    { width: 222px; height: 70px; position: absolute; left: 50%; margin-right: -50%; transform: translateX(-50%); top: 0; }

    .navbar .navbar-container .items
    { padding-left: 0%; padding-right: 0px; grid-template-columns: auto; margin-top: -100%; transform-origin: top; transform: scaleY(0%); transition: .4s; transition-timing-function: linear; }

    .navbar .navbar-container .panel
    { display: block; }

    .marker
    { margin-top: -0px; }
}
@media screen and (min-width:650px) and (max-width:899px) 
{
    .navbar
    { margin-bottom: 140px; }

    .navbar .navbar-container
    { grid-template-columns: auto; padding-left: 0px; padding-top: 70px; }

    .navbar .navbar-container .logo
    { width: 222px; height: 70px; position: absolute; left: 50%; margin-right: -50%; transform: translateX(-50%); top: 0; }

    .navbar .navbar-container .items
    { padding-left: 0%; padding-right: 30px; background-image: linear-gradient(to right, #232f95, #0a0a0a); }

    .marker
    { margin-top: -140px; }
}
@media screen and (min-width:900px) and (max-width:1035px) 
{
    .navbar
    { margin-bottom: 70px; }

    .navbar .navbar-container .items
    { padding-left: 5%; }

    .marker
    { margin-top: -70px; }
}
@media screen and (min-width:1036px) 
{
    .navbar
    { margin-bottom: 70px; }

    .marker
    { margin-top: -70px; }
}