@media screen and (min-width: 1px) and (max-width: 1199px){

    .header {
        position: absolute;
        z-index: 3;
        width: 80%;

        
    }
 
    .header ul {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
        background-color: rgba(198, 198, 198);


    }

    .header ul a{
        display: block;
        text-align: center;
        
        }
    .header .menu {
            clear: both;
            max-height: 0;
            transition: max-height .2s ease-out;
            
        }

    .header .hamburger_icon {
            padding: 28px 20px;
            position: relative;
            float: left;
            cursor: pointer;
        }
        
    .header .hamburger_icon .nav_icon {
            background: #028b9e;
            display: block;
            height: 3px;
            width: 22px;
            position: relative;
            transition: background .2s ease-out;
        }
    .header .hamburger_icon .nav_icon:before {
            background: #028b9e;
            content: "";
            display: block;
            height: 100%;
            position: absolute;
            width: 100%;
            top: 7px;
            transition: all .2s ease-out;
        }
        
    .header .hamburger_icon .nav_icon:after {
            background: #028b9e;
            content: "";
            display: block;
            height: 100%;
            position: absolute;
            width: 100%;
            top: -7px;
            transition: all .2s ease-out;
        }

        

        
    .header .hamburger_button:checked ~ .menu {
            max-height: 240px;
            width: 100%;
        }
   
            
    .header .hamburger_button:checked ~ .hamburger_icon .nav_icon {
            background-color: transparent;
        }

    .header .hamburger_button:checked ~ .hamburger_icon .nav_icon:before {
            transform: rotate(-45deg);
            top: 0;
        }    
    .header .hamburger_button:checked ~ .hamburger_icon .nav_icon:after {
            transform: rotate(45deg);
            top: 0;
        }
        .header .nav_left {
            float: none;
        }
        .header .nav_right {
            float: none;
        }
    }