.headerdiv {
        position: relative; width: 100%; height: 100%;
    }

    #home-icon {
        position: absolute; width: auto; height: 50px; display: flex; align-items: center;top: 50px; display: inline-block; cursor: pointer;
    }

    #home-icon i {
        background: whitesmoke;
    }

    #home-icon span {
        margin-left: 15px; font-family: 'NAL Hand'; letter-spacing: 8px; font-size: 18pt;
    }

    .menubar, .activebar {
        position: absolute; 
        top:50px; 
        right: 10px;
        width: auto; 
        height: 49px; 
        text-align: center;  
        display: inline-block; 
        cursor: pointer;
    }
    .activebar {
        padding-top: 10px;
        padding-right: 5px;
    }

    .menubar .bar {
        width: 35px; height: 5px; background-color: black; margin: 10px;  transition: 1s;
    }

    .bar1,.bar2,.bar3{
        width:35px;
        height:5px;
        background-color: black;
        margin: 6px 0;
        transition: 1s;
    }

    .activebar .bar1 {
        -webkit-transform: rotate(-45deg)
        translate(-8px,6px);
        transform:rotate(-45deg)
        translate(-8px,6px);
    }
    .activebar .bar2 {
        opacity:0;
    }
    .activebar .bar3 {
        -webkit-transform: rotate(45deg)
        translate(-8px,-8px);
        transform:rotate(45deg)
        translate(-8px,-8px);
    }

    #menus {
        position: absolute;height: 50px; width: auto; top: 50px; right: 100px; z-index: 0;
    }

    #menus h1 {
        display: inline-block; margin: 0; margin-right: 30px; z-index: 0; cursor: pointer;
    }

    #whitecover {
        position: absolute;height: 50px; width: 700px; top: 50px; right: 100px; transition: 3s; background: whitesmoke; z-index: 100;
    }

    .arrow-div {
        display: flex; flex-direction: row; justify-content: center;
    }

    .arrow-div i {
        color: rgba(0,0,0,0.5); cursor: pointer; opacity: 0.2;
        margin-left: 15px;
        margin-right: 15px;
    }

    .arrow-div i.fa-caret-square-up:hover {
        opacity: 1.0;
        transform: translate(0, -10px);
        transition: all 1s ease 0s;
    }

    .arrow-div i.fa-caret-square-down:hover {
        opacity: 1.0;
        transform: translate(0, 10px);
        transition: all 1s ease 0s;
    }


    @media (min-width: 768px) and (max-width: 1024px) {
        #whitecover {
            position: absolute;height: 50px; width: 400px; top: 50px; right: 100px; transition: 3s; background: whitesmoke; z-index: 100;
        }

        #menus {
            position: absolute;height: 50px; width: auto; top: 50px; right: 100px; z-index: 0; display: flex; align-items: center;
        }
    
        #menus h1 {
            display: inline-block; margin: 0; margin-right: 30px; z-index: 0; cursor: pointer; font-size: 11pt;
        }
    
    }