<!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;  
    font-size: 0.7em;
    color: #FFFFFF;
    padding-left: 2.5%;
    
}



        


@media only screen and (max-width: 1024px)  {
    table {
    table-layout: auto;
    width: 180px;
    font-size: 1.8em;  
    height: 10px;
}

table2 {
    table-layout: auto;
    width: 180px;
    font-size: 1.8em;  
    height: 10px;
}
} 

@media only screen and (max-width: 880px)  {
    table {
    table-layout: auto;
    width: 180px;
    font-size: 1.5em;  
    height: 20px;
}
}

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

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

@media only screen and (max-width: 240px)  {
    table{        
        width:166px;
        
        width: 166%;
        margin: auto;
        height: 10px;
        font-size: 0.9em;
    } 

    .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>