<!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.8em;
    color: #FFFFFF;
    padding-right: 3.6%;
    
}

.menu-item-2 {
    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: 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: 1.75em;
    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: 1300px)  {
    .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: 1.75em;
    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: 1380px)  {
    .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: 1.6em;
    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: 1060px)  {
    .table {
    table-layout: auto;
    width: 100%;
     padding-left: 1.5%;   
}

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

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

    .menu-item {
    font-size: 1.6em;
    color: #FFFFFF;
    padding-right: 1.5%;
    
}
    
    .logo {        
    height: 85px;
    width: 85px;    
        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: 20px;
    position: relative;
     
    width: 800px;
    margin-right: 0.2% ;
}

    .menu{
        width:800px;
        padding-left: 1.5%;
        
        width: 85%;
    }
    
    .menu-item {
    font-size: 1.279em;
    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: 80px;    
     padding-left: 0.1%;   
        
    }


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

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

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

    .menu{
        
        width: 860px;
        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: 80px;    
    padding-left: 0.5%;   
        
    }


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

}

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

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

    .menu{
        
        width: 790px;
        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: 80px;    
    padding-left: 0.5%;   
        
    }


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

}

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

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

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


    .menu-item {
    font-size: 1.55em;
    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: 80px;    
    padding-left: 0.5%;   
        
    }


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

}

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

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

    .menu{
        
        width: 890px;
        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: 80px;    
    padding-left: 0.5%;   
        
    }


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

}

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

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

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


    .menu-item {
    font-size: 1.3em;
    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: 80px;    
    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: 80px;    
      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: 320px;
    margin-right: 0.2% ;
}

    .menu{
        
        width: 320px;
        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: 80px;
    width: 80px;    
      padding-left: 0.5%;  
        
    }


    .logo .logo-image {
    height: 80%;
    width: 80%;
    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:240px;
        padding-left: 0.5%;
        width: 100%;
    }

    .menu-item {
    font-size: 0.95em;
    color: #FFFFFF;
    padding-right: 0.5%;
    height: 20px;    
}
    
        .menu-item-2 {
    font-size: .9em;
    color: #FFFFFF;
    padding-right: 0.5%;    
}
    
    
    .logo {        
    height: 70px;
    width: 70px;    
        padding-left: 0.5%;
    }


    .logo .logo-image {
    height: 70%;
    width: 70%;
    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: 40px;
    width: 240px;
    position: relative;
    margin-left: auto ;
    margin-right: auto ;
}

    .menu{
        width:240px;
        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: .7em;
    color: #FFFFFF;
    padding-right: 0.5%;    
}
    
    
    .logo {        
    height: 30px;
    width: 30px;    
        padding-left: 0.1%;
    }


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


</style>
</head>