.LOGO {position: fixed; top: 8px; left: 50%; height: 10%;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);}

    .userinfo {position: fixed;  top: 8px; left: 8px; z-index: 1;}
    @media screen and (min-width: 1100px) 
    {
        .LOGING{position: fixed;  top: 8px; right: 8px; z-index: 1; text-align: center;}  
        .button { border: none; background-color: #4CAF50; color: white; text-align: center;
        text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer;}
        .but1 {width: 25%; height: 10%; font-size: 3vh; font-weight: bold; background-color: #4CAF50;}
        .but2 {width: 25%; height: 5%; font-size: 3vh; font-weight: bold; background-color: #f44336; }
        .but3 {width: 25%; height: 10%; font-size: 3vh; font-weight: bold; background-color: #f44336; }
        .button4 {background-color: rgba(117, 111, 111, 0.479); color: rgb(185, 179, 179); border: 2px solid #e7e7e7;}
        .button4:hover {background-color: #e7e7e7;}
        .menu-items{float:initial;padding: 16px 32px; width: auto; height: 10%; font-size: 2vh; font-weight: bold; background-color: white; color: black; border: 2px solid #e7e7e7;}
        .menu-items:hover {background-color: #e7e7e7;}
        .buttonlog {border: none; color: white; padding: 5px 5px;  text-align: center; text-decoration: none;
        display: inline-block; margin: 4px 4px; cursor: pointer; z-index: 1;}
        body{padding-top: 10vh;}
    }
    
    /* Change styles for cancel button and signup button on extra small screens */
    @media screen and (max-width: 300px) {.cancelbtn, .signupbtn {width: 100%;}}

    /*Selection_DIV*/
    @media screen and (max-width: 1100px) 
    {
        .LOGING{position: fixed;  top: 8px; right: 8px; z-index: 1; text-align: center;}  
        .button { border: none; background-color: #4CAF50; color: white; text-align: center;
        text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer;}
        .but1 {width: 25%; height: 10%; font-size: 3vh; font-weight: bold; background-color: #4CAF50;}
        .but2 {width: 25%; height: 5%; font-size: 3vh; font-weight: bold; background-color: #f44336; }
        .but3 {width: 25%; height: 10%; font-size: 3vh; font-weight: bold; background-color: #f44336; }
        .button4 {background-color: rgba(117, 111, 111, 0.479); color: rgb(185, 179, 179); border: 2px solid #e7e7e7;}
        .button4:hover {background-color: #e7e7e7;}
        .menu-items{float:initial;padding: 16px 32px; width: auto; height: 10%; font-size: 2vh; font-weight: bold; background-color: white; color: black; border: 2px solid #e7e7e7;}
        .menu-items:hover {background-color: #e7e7e7;}
        .buttonlog {border: none; color: white; padding: 5px 5px;  text-align: center; text-decoration: none;
        display: inline-block; margin: 4px 4px; cursor: pointer; z-index: 1;}
        body{padding-top: 10vh;}
    }
.vl {  border-left: 2px solid rgb(0, 0, 0);  height: 20px;}