@media only screen and (max-device-width: 1023px) {
    .mob-header {
        max-width: 100vw;
        height: auto;
        background-color: $primary-color;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        box-shadow: 0 0 6px rgba(black, 0.6);
        margin-bottom: .5rem;
        position: relative;

        &__logo {
            grid-column: 2 / 6;
            grid-row: 1 / 2;
            background-color: $primary-color-dark;
            padding: 0;
            align-self: center;
            text-align: center;
            justify-content: center;
            padding: 0.25rem;
            h1 {
                margin: 0;
                font-size: 2.5em;
            }
        }

        &__menu {
            grid-column: 6 / 7;
            grid-row: 1 / 2;       
            align-self: center;
            text-align: center;
            justify-items: center;
            

            .navigation {
                    
                &__checkbox {
                    display: none;
                }
            
                &__background {
                    height: 4.5rem;
                    opacity: 0;
                    position: absolute;
                    width: 4.5rem;
                    top: -100%;
                    left: -100%;
                    background-image: radial-gradient($primary-color, $primary-color-dark, $primary-color);
                    transition: .8s all;
                    z-index: 2000;
                    overflow: hidden;
                }
            
                &__nav {
                    height: 100vh;
                    width: 0;
                    position: fixed;
                    top: 0;
                    right: 0;
                    opacity: 0;
                    transition: all .8s;
                    z-index: 2001; 
                    
                    & ul {
                        list-style: none;
                        margin: 0; 
                        // padding: .5rem 0;
                        line-height: 1;
                        font-size: 80%;
                        
                        a {
                            padding: .3rem;
                            color: white;
                            font-size: 150%;
                            
                        }
                    
                        li {
                            display: block;
                            position: relative;
                    
                            a {
                                display: block;
                                background-image: linear-gradient(120deg, transparent 0%, transparent 50%, white 50%);
                                background-size: 220%;
                                transition: .4s all ease-in-out;
                            }
                    
                            a:hover, a:active {
                                
                                color: $primary-color-dark;
                                background-position: 100%;
                                transition: .4s all ease-in-out;  
                            }
                            ul {
                                ul {
                                    left: 100%;
                                    top: 0;
                                }
                            }
                        }
                    }
            
                    & li {
                        transition: 0.3s all ease-in-out;
                        padding: .5rem;
                    ul {
                        display: none;
                        transition: 0.3s all ease-in-out;
                        li {
                            transition: 0.3s all ease-in-out;
                        }
                    }
                    
                    &:hover > ul {
                        display: block;
                        
                        transition: 0.2s ease-in-out;
                        -webkit-transform: translate3d(0,0,0);
                        -webkit-backface-visibility: hidden;
                    }
                    &:hover{
                        li {
                            float: none;
                        }
                    }
                    & ul:before, 
                    & ul:after {
                    content: " "; /* 1 */
                    display: table; /* 2 */
                    }
                    & ul:after { clear: both; }
                }
                }
            
            
                &__list {
                position: absolute;
                left: 2%;
                top: 2%;
                text-align: left;
                z-index: 5000;
                }
            
            
                &__icon {
                    position: relative;
                    z-index: 10000;
                    margin-left: -1rem;
                    margin: auto 0;

                    &,  
                    &::before,
                    &::after{
                        width: 80%;
                        height: 4px;
                        background-color: white;
                        display: inline-block;
                    
                    }
            
                    &::before,
                    &::after{
                        content: "";
                        position: absolute;
                        left: 0;
                        transition: all .2s;
                        
                    }
            
                    &::before {top: -.8rem;}
                    &::after {top: .8rem;}
                }
            }
    
            .navigation__checkbox:checked ~ .navigation__background {
                transform: scale(80);
                top: 0;
                right: 0;
                opacity: 1;
            
            }
        
            .navigation__checkbox:checked ~ .navigation__nav {
                opacity: 1;
                width: 100%;
            }

            .navigation__button:hover .navigation__icon::before {
                top: -1rem;
                
            }
        
            .navigation__button:hover .navigation__icon::after {
                top: 1rem;
            }
        
            .navigation__checkbox:checked + .navigation__button .navigation__icon {
                background-color: transparent;
            }
        
            .navigation__checkbox:checked + .navigation__button .navigation__icon::before {
                top: 0;
                width: 2rem;
                transform: rotate(45deg);
            }
        
            .navigation__checkbox:checked + .navigation__button .navigation__icon::after {
                top: 0;
                width: 2rem;
                transform: rotate(-45deg);
            }

            
        }

        &__search {
            grid-column: 1 / 2;
            grid-row: 1 / 2; 
            text-align: center;
            margin: auto 0;  
                      
            .search__checkbox-2 {
                display: none;
            }

            .fa-searchengin{
                color: white;
                font-size: 200%;
            }

            .search_background {
                position: absolute;
                width: 0;
                top: 2rem;
                opacity: 0;
                height: auto;
                left: 5rem;
                background-image: linear-gradient(15deg, $primary-color-dark, $primary-color, $primary-color-dark);
                transition: .4s all ease-in-out;
                z-index: 3000000;
        
                .a-search-form {
                    position: relative;
                    top: .5rem;    
                    padding: 0 0.5rem;
                    &__field {
                        height: auto;
                        background-color: white;
                        box-shadow: inset 0px 0px 3px rgba(0,0,0,0.5);
                        padding: .7rem;
                        border: none;
                        width: 100%;
                    
                        -webkit-transition: width 0.4s ease-in-out;
                        transition: width 0.4s ease-in-out;
                
                        &:hover {
        
                        }
                
                        &:focus{
                            width: 100%;
                        }
                    }
                
                
                    &__label {
                        margin-bottom: 0;
                    }
                    &__button-2 {
                        position: absolute;
                        justify-content: center;
                        // top: 2rem;
                    }
                }
        
        
            }

            .search__checkbox-2:checked ~ .search_background {
                top: 3.5rem;
                left: 0;
                width: 100%;
                opacity: 1;
                transition: .4s all ease-in-out;
            }
        }

    }
}

@media only screen and (min-device-width: 1024px) {
    .mob-header {
        display: none;
    }

}