<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: collapse;
    border: 0px solid black;
} 

th,td {
    border: 0px solid black;
}

table {
    table-layout: auto;
    width: 1480px;  
    
    color: #FFFFFF;
    padding-left: 2.5%;
    
    
}

    .table-bar {
    background-color: #666666;
    height: 15px;
    width: 180px;
    position: relative;
    margin-left: auto ;
    margin-right: auto ;
}

    .menu{
        width:166px;
        padding-left: 0.5%;
        width: 90%;
    }

    .menu-item {
    font-size: 2.7em;
    color: #FFFFFF;
    padding-right: 3.5%;
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

.menu-item-2 {
    font-size: 2.1em;
    color: #FFFFFF;
    padding-right: 3.5%;
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
    
    .logo {        
    height: 85px;
    width: 85px;    
        padding-left: 0.5%;
    }


    .logo .logo-image {
    height: 100%;
    width:100%;
    padding-top: 10%;
}




        


@media only screen and (max-width: 1024px)  {
    .table {
    table-layout: auto;
    width: 100%;
        
}

.table-bar {
    background-color: #666666;
    height: 15px;
    width: 180px;
    position: relative;
    margin-left: auto ;
    margin-right: auto ;
}

    .menu{
        width:166px;
        padding-left: 0.5%;
        width: 90%;
    }

    .menu-item {
    font-size: 2.1em;
    color: #FFFFFF;
    padding-right: 3.5%;
    
}
    
    .logo {        
    height: 85px;
    width: 85px;    
        padding-left: 0.5%;
    }


    .logo .logo-image {
    height: 100%;
    width:100%;
    padding-top: 10%;
}
}
@media only screen and (max-width: 800px)  {
    .table {
    table-layout: auto;
    width: 100%;
}
    .menu-item {
    font-size: 1.89em;
    color: #FFFFFF;
    padding-right: 2.5%;
}

.menu-item-2 {
    font-size: 1.62em;
    color: #FFFFFF;
    padding-right: 2.5%;
    
}
} 

@media only screen and (max-width: 600px)  {
    .table {
    table-layout: auto;
    width: 100%;
    
}

.table-bar {
    background-color: #666666;
    height: 20px;
    position: relative;
    width: 100%;
    
    margin-right: 0.2% ;
}

    .menu{
        
        
        width: 85%;
    }


    .menu-item {
    font-size: 1.279em;
    color: #FFFFFF;
    padding-right: 0;
    
}

.menu-item-2 {
    font-size: 1.6em;
    color: #FFFFFF;
    padding-right: 3.5%;
    height: 40px;
    margin-top: -20px;
}

    .logo {        
    height: 80px;
    width: 80px;    
        
        
    }


    .logo .logo-image {
    height: 80%;
    width: 80%;
    padding-top: 10%;
}

}

@media only screen and (max-width: 480px)  {
    table {
    table-layout: auto;
    width: 180px;    
}
}

@media only screen and (max-width: 320px)  {
    table {
    table-layout: auto;
    width: 180px;  
    font-size: 0.9em;
    }}

@media only screen and (max-width: 240px)  {
    #table{        
        width:166px;
        //left: 5%;
        width: 166%;
        margin: auto;
    } 

    .table-bar {
    background-color: #666666;
    height: 75px;
    width: 166px;
    position: relative;
    margin-left: auto ;
    margin-right: auto ;
}

    .menu{
        width:166px;
        padding-left: 3.5%;
        width: 100%;
    }

    .menu-item {
    font-size: .7em;
    color: #FFFFFF;
    padding-right: 3.5%;
    
}
    
    .logo {        
    height: 75px;
    width: 25px;    
        padding-left: 3.5%;
    }


    .logo .logo-image {
    height: 75%;
    width:25%;
    padding-top: 10%;
}
}


</style>
</head>