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

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

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

    .table-bar {
    background-color: #666666;
    height: 55px;
    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%;
    
}

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


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


@media only screen and (max-width: 1400px)  {
    .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: 95px;    
        padding-left: 0.5%;
    }


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

        


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

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

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

    .menu-item {
    font-size: 1.5em;
    color: #FFFFFF;
    padding-right: 1.5%;
    
}
    
    .logo {        
    height: 85px;
    width: 95px;    
        padding-left: 0.1%;
    }


    .logo .logo-image {
    height: 100%;
    width:100%;
    padding-top: 10%;
}
}
@media only screen and (max-width: 800px)  {
    .table {
    table-layout: auto;
    width: 100%;
    padding-left: 0.1%;
}

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

    .menu{
        width:150px;
        padding-left: 0.1%;
        
        width: 85%;
    }
    
    .menu-item {
    font-size: 1.6em;
    color: #FFFFFF;
    padding-right: 0.5%;
}

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

.menu-item-3 {
    font-size: 1.5em;
    color: #FFFFFF;
    padding-right: 0.5%;
    
   
}


 .logo {        
    height: 80px;
    width: 90px;    
     padding-left: 0.1%;   
        
    }


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

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

.table-bar {
    background-color: #666666;
    height: 64px;
    position: relative;
    width: 690px; 
    
    padding-left:-1.8% ;
}

    .menu{
        
        width:700px;
        padding-left: 1%;
        width: 85%;
    }


    .menu-item {
    font-size: 1.279em;
    color: #FFFFFF;
    padding-right: 0.5%;
    height: 20px;
   
}

.menu-item-2 {
    font-size: 1.279em;
    color: #FFFFFF;
    padding-right: 0.5%;
    height: 20px;
  
}

.menu-item-3 {
    font-size: 1.279em;
    color: #FFFFFF;
    padding-right: 0.5%;
    height: 20px;
   
}




    .logo {        
    height: 80px;
    width: 90px;    
    padding-left: 0.5%;   
        
    }


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

}

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

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

    .menu{
        
        width:480px;
        padding-left: 0.5%;
        width: 85%;
    }


    .menu-item {
    font-size: 1.279em;
    color: #FFFFFF;
    padding-right: 0.5%;
    height: 20px;
}

.menu-item-2 {
    font-size: 1.279em;
    color: #FFFFFF;
    padding-right: 0.5%;
    height: 20px;
   
}

menu-item-3 {
    font-size: 1.279em;
    color: #FFFFFF;
    padding-right: 0.5%;
    height: 20px;
    
}

    .logo {        
    height: 80px;
    width: 90px;    
      padding-left: 0.5%;  
        
    }


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

}

@media only screen and (max-width: 420px)  {

     .table {
    table-layout: auto;
    width: 100%;
}


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


    .menu{
        width: 420px;
        padding-left: 0.5%;
        width: 85%;
    }



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


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


    .logo {        
    height: 20px;
    width: 30px;    
    padding-left: 0.5%;      
}



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


@media only screen and (max-width: 360px)  {

     .table{        
     width: 360px;
     //left: 5%;
     width: 100%;
     margin: auto;
} 

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

}

    .menu{
    width:360px;
    padding-left: 0.1%;
    width: 100%;
}


    .menu-item {
    font-size: 0.6em;
    color: #FFFFFF;
    padding-right: 0.5%;
    height: 20px;    
}  

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

    .logo {        
    height: 40px;
    width: 50px;    
    padding-left: 0.5%; 
}

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




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

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

    .menu{
        
        width: 320px;
        padding-left: 0.5%;
        width: 85%;
    }


    .menu-item {
    font-size: 0.6em;
    color: #FFFFFF;
    padding-right: 0.1%;
    
}

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

    .logo {        
    height: 30px;
    width: 40px;    
      padding-left: 0.5%;  
        
    }


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

}

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

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

    .menu{
        width: 240px;
        padding-left: 0.1%;
        width: 100%;
    }

    .menu-item {
    font-size: .5em;
    color: #FFFFFF;
    padding-right: 0.1%;
    height: 10px;    
}
    
        .menu-item-2 {
    font-size: .7em;
    color: #FFFFFF;
    padding-right: 0.5%;    
}
    
    
    .logo {        
    height: 20px;
    width: 30px;    
        padding-left: 0.1%;
    }


    .logo .logo-image {
    height: 20%;
    width:20%;
    padding-top: 1%;
}
}


</style>
</head>