@media only screen and (min-width: 320px) {
    :root{
        --header-bg-clr:#ffffff;
        --header-font-clr: var(--font-clr);
        --header-link-clr: var(--link-clr);
        --header-link-hover-clr: #6BA8B9;
        --header-height: 97.92px;
        --header-info-banner-height: 37.92px;
        --desktop-header-height: 150px;
        --admin-bar-header-height: 32px;
    }
    #mobile-header{
        padding-left: var(--mobile-side-padding);
        padding-right: var(--mobile-side-padding);
        position: relative;
    }
    #mobile-header .site-logo, #mobile-header .menu-toggle{
        padding:0px;
        margin:0px;
    }
    .site-header, .main-navigation{
        background-color: var(--dark-blue);
        color:var(--header-font-clr);
    }

    .site-header .inside-navigation {
        width: 100%;
    }
    
    .inside-header .main-navigation{
        flex: 4;
    }

    .inside-header .site-logo{ 
        flex: 1;
    }
    .quick-link {
        flex: 1;
        background-color: unset;
    }
    /* Slideout (off-canvas) menu is styled in css/slideout-menu.css */
    /*Transparent header*/
    .main-navigation.navigation-stick{
        background-color: var(--header-bg-clr);
    }
    .main-navigation .menu-toggle{
        font-size:25px;
    }
    .main-navigation .menu-toggle:hover{
        color:var(--header-link-hover-clr);
    }
    .sticky-nav-scrolling-up .menu-toggle{
        color:#000000;
    }
    .sticky-nav-scrolling-up .menu-toggle:hover{
        color:var(--link-clr);
    }
     /* Some icons */ 
     .mobile-header .inside-navigation .some-icon-wrapper {
        display: none;
    }
    .inside-header .some-icon-wrapper{
        flex: 1;
        display: flex;
        justify-content: end;
    }
    .site-header .some-icon-wrapper, .mobile-header .site-header .some-icon-wrapper{
        padding: 0;
    }
    .site-header .some-icon-wrapper a.gb-button, .mobile-header .site-header .some-icon-wrapper a.gb-button{
        color:var(--header-font-clr);
        background-color: var(--header-bg-clr);
        padding: 10px;
        border-radius: 50%;
        font-size: 1rem;
    }

    .site-header .some-icon-wrapper a.gb-button:hover, .mobile-header .site-header .some-icon-wrapper a.gb-button:hover {
        color:var(--header-link-hover-clr);
        background-color: var(--header-bg-clr);
    }
    .mobile-header .site-header .some-icon-wrapper .gb-grid-wrapper-afe6a0be {
        display: flex;
        flex-wrap: nowrap;
    }

    .mobile-header .site-header .some-icon-wrapper .gb-grid-column {
        display: flex;
        align-items: center;
        margin: 0;
    }
    /*Info banner*/
    .admin-bar .header-info-banner{
        /*margin-top:32px;*/
    }
    .header-info-banner.color-section, .editor-styles-wrapper .header-info-banner{
        padding:10px 0px;
        background-color: var(--bg-clr);
        color:var(--font-clr);
    }
    /*Quick link*/
    .inside-navigation .quick-link a {
        font-size: 10px;
        margin-right: 20px;
    }
}

@media only screen and (min-width: 768px) {
    .header-wrap #site-navigation:not(.toggled), .header-wrap #mobile-header:not(.toggled):not(.navigation-stick), .has-inline-mobile-toggle .mobile-menu-control-wrapper{
        background-color: var(--header-bg-clr);
    }
    .main-navigation.has-sticky-branding:not(.grid-container) .inside-navigation:not(.grid-container) .navigation-branding{
        margin:0px;
        padding:0px
    }
    #mobile-header.navigation-stick.has-sticky-branding .inside-navigation.grid-container{
        padding: 0px;
    }
    .mobile-header .inside-navigation .some-icon-wrapper {
        display: block;
    }

}

@media only screen and (min-width: 991px) {
    /*General stuff*/
    #primary-menu .dropdown-menu-toggle{
        padding:0px;
        margin:0px;
        
    }
    .site-header{
        padding-left: var(--mobile-side-padding);
        padding-right: var(--mobile-side-padding);
        
    }
    .home .site-header{
        opacity:0;
        margin-top:30px;
    }
    .home .site-header.animate-me{
        animation: fadeIn var(--transition-speed) ease-out forwards;
    }
    .home .header-info-banner{
        opacity:0;
    }
    .home .header-info-banner.animate-me{
        animation: fadeIn var(--transition-speed) ease-out forwards;
    }
    .woocommerce .site-header{
        margin-top:0px;
    }
    .site-header .inside-header{
        padding:0px;
        background-color: var(--header-bg-clr);
        padding:0px 25px;
        border:1px solid #000000;
        margin-top:30px;

    }
    .archive .site-header .inside-header{
        margin-bottom:30px;
    }
    /*Logo*/
    .inside-header .site-logo{
        flex:unset;
    }
    .site-header .header-image{
        height:60px;
        width:auto;
        padding:10px 0px;
        margin:10px 0px
    }
    /*Header ordering*/
    .site-header .inside-navigation{
        margin-top:8px;
        justify-content: flex-start;
    }
    .inside-navigation #primary-menu{
        display: flex;
        justify-content: center;
        order:2; 
    }
    .inside-navigation .menu-bar-items{
        order:1;
    }
    .inside-navigation .header-shop-stuff{
        order:3;
        margin-left:auto;
        padding-left:25px;
        border-left:1px solid #000000;
    }
    /*Main navigation*/
    #site-navigation .main-nav > ul > li > a, .main-navigation .main-nav > ul > li > a{
        color: var(--header-font-clr);
        transition: color 0.3s ease;
        padding:0px 10px;
        text-transform: uppercase;
        font-weight:normal;
        font-size:15px;
        padding:0px 20px;
    }
    .inside-navigation .menu-bar-items a{
        line-height:unset;
    }
    .inside-navigation .menu-bar-items span{
        padding:0px;
        font-size:18px;
        transition: color 0.3s ease;
        color:var(--header-font-clr);
        font-weight:normal;
        line-height:unset;
    }
    .inside-navigation .menu-bar-items span.gp-icon{
        margin-right:10px;
    }
    #site-navigation .main-nav ul li.current-menu-item > a{
        text-decoration: underline;
    }
    #site-navigation .main-nav ul li a:hover,  .inside-navigation .menu-bar-items a:hover span{
        color:var(--header-link-hover-clr);
    }
    /*Sub menu*/
    #site-navigation .main-nav ul li .sub-menu li a{
        background-color: #FFFFFF;
        text-transform: none;
        font-size:12px;      
        padding:10px 20px;
    }
    #site-navigation .main-nav ul li.current-menu-item > a{
        color:var(--header-link-hover-clr);
    }

    /*Sticky nav*/
    #sticky-navigation{
        padding-left: var(--mobile-side-padding);   
        padding-right: var(--mobile-side-padding);
    }
    #sticky-navigation .inside-navigation{
        justify-content: space-between;
        max-width: var(--container-width);
        margin: 0 auto;
    }
    #sticky-navigation .inside-navigation .main-nav{
        flex-grow: unset;
    }
    #sticky-navigation .main-nav ul li a {
        
    }

    .inside-navigation .quick-link a {
        font-size: 12px;
        color:var(--header-link-clr);
    }
    .inside-navigation .quick-link a:hover {
        color:var(--header-link-hover-clr);
    }
}

@media only screen and (min-width: 1024px) {
    .sticky-navigation-transition .navigation-branding{
        margin:0px;
        padding:0px;
    }
    .sticky-navigation-transition .main-nav{
        flex-grow:2;
    }
    .sticky-navigation-transition .some-icon-wrapper{
        flex:1;
    }
}

@media only screen and (min-width: 1280px) {
    .site-header{
        padding: 0px;
    }
    .inside-header {
        padding-left: 0;
        padding-right: 0;
    }
    .inside-header .main-navigation{
        flex:6;
    }
    #sticky-navigation{
        padding: 0px;
    }
    #site-navigation .main-nav > ul > li > a{
        padding:0px 20px;
        font-size:18px;
    }
    
}