.container {
position:relative;
display: flex;
float:left;
width:100%;
background:#fff;//#90f2d3;
padding:2px 2px 2px 2px;	 
overflow:auto;
}
.container h4{
font-weight: bold 100% sans-serif; 
color:#fff; 
background:transparent;
font-size:1.5vw;
}
.side-left{
  position: relative;
  width:60%;
  padding:3px;
 // overflow:auto;
}
.side-left h4{
//font-weight: bold 100% sans-serif; 
color:#440000; 
background:transparent;
font-size:clamp(12px, 14px,16px);	   
}
.side-left h5{
font-weight: bold 100% sans-serif; 
color:#0044ff; 
background:transparent;
font-size:1.5vw;
padding:3px;
border-bottom:2px solid blue;
box-shadow:5px 5px #aaa;
}
.side-left h6{
font-weight: bold 100% sans-serif; 
color:#505; 
background:transparent;
font-size:1vw;
padding:2px;
border-bottom:2px solid blue;
//box-shadow:5px 5px #aaa;
font-size:clamp(12px, 12px,14px);
}
.side-right{
  position:relative;
  width:35%;	
  border: 2px 2px 2px 2px;
  border-left: double blue;
 // border-right:double blue;
 // border-bottom: double blue;
  padding:10px;
//  box-shadow: 30px 20px #888888;
 // background:rgba(255,255,255,10);	  
}


.side-right h4{
  color:#440000;
  font-size:clamp(1.2vw,1.5vw,1.6vw); ;
  background:transparent;
}


.show h4{
  font-size:1.5vw;
  background:transparent;
}

.sticky_left{
position:fixed;
top:0;
left:65%;
}

.sticky_top{
position:fixed;
top:0px;
width:100%;
}

.header {
        position:relative;
        //top:0;
        //width: 100%;
        //height: 15%;
        margin: 0 auto;
        padding: 0px 2px 0px 2px;
        background: #00ffff;//#87CEEB;//#ffc107;// #0055ee;
        font-weight: bold;
        color:#aa4400;
        font-size:2vw;
       //      text-align:center;
       // content: center;
        justify-content: center;
        display: flex;
        z-index: 2;
}

.footer {
        position:relative;
     //   width: 100%;
        margin: 0 auto;
        padding: 0px 2px 0px 2px;
        background: #00aaaa;
        font-weight: bold;
        color:#aa4400;
	font-size:1.5vw; 
        justify-content: left;
        display: flex;
        z-index: 2;

     }
.footer ul{
list-style-type: none;
}
.footer ul li{
      color: #fff;
      text-align: left;
      padding: 2px 10px;
      text-decoration: none;
      font-size:1.5vw;
      font-weight:bold;
      display:inline;
      cursor:pointer;	      
}
.footer ul li:hover{
      color: #fff;
      background:#bbb;
}

.footer a{
  color: #fff;
}
.footer a:hover{
  color: #00f;
}




.footer h4{
  color: #fff;
}
.front {
        position:relative;
        padding: 0px 2px 0px 2px;
        background: #00aaaa;//#87CEEB;//#ffc107;// #0055ee;
        font-weight: bold;
        color:#ffffaa;
        font-size:2vw;
        justify-content: left;
         display: flex;
        z-index: 2;
        width:100%

}
.show{
display:none;
}  

.container_topnav{
z-index:3;
width:100%;
background:white;
display:block;
}

.topnav {
  overflow: hidden; 
  background-color: #b3d9ff; //#0055ee;
//  z-index:3;
  width:100%;
}

.topnav button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1px 10px 1px 10px;
  transition: 0.3s;
  font-weight:bold;
  font-size: 1rem;
}

.topnav button:hover {
  background-color: #df6c20;
}

.topnav button.active {
  background-color: #df6c20;
}


.show button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1px 10px 1px 10px;
  transition: 0.3s;
  font-weight:bold;
  color:blue;
  font-size: 1.5vw;
}

.show button:hover {
  background-color: #00ffff;
}

.show button.active {
  background-color: #ff0000;
}

.license{
background:#eee;
}  
table.rights{
font-family: Arial, Helvetica, sans-serif;
font-size:clamp(1vw,1.2vw,1.4vw);
width:100%;
font-weight:bold;
border-collapse: collapse;
}  

table.rights td:first-child{
 text-align: left;
background:#ccc;

}  

table.rights td{
border: 1px solid black;
}  
table.rights th{
text-align: left;
background:#bbb;
color:blue;
font-weight:bold;
border:2px solid blue;
}

#tableallvol{
 font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  font-size:1.5vw;
   font-weight:bold;  
	
}  
#tableallvol tr:nth-child(even){background-color: #f2f2f2;}


.side-right button {
  background-color:transparent;
  display:block;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 2px 1px 2px 1px;
  transition: 0.3s;
  font-weight:bold;
  font-size: clamp(1vw,1.4vw,1.5vw); 
}

.side-right button:hover {
  background-color: #00aabb;
  color:white;
}

.side-right button.active {
  background-color: #00aabb;
color:white;
}

.topnav .icon {
  display: none;
}

.front .menu {
  display: none;
}



@media screen and (max-width: 600px) {
  .topnav  button {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .front a.menu {
   float: right;
    display: block;
  }   
.side-left{
width:100%;
}
  





}

@media screen and (max-width: 1200px) {
//.show{
//display:none;
//}
//.side-right{
//display:block;
//}

}  
/*
@media screen and (max-width: 600px) {
.side-right{
display:none;
}  
.container h4{
font-size:1.5rem;	   
}
.side-right h4{
font-size:2vw;
}
.side-left h4{
font-size:2vw;
}
.side-left h5{
font-size:2vw;
}
.side-left h6{
font-size:2vw;
}
}  
*/



@media (max-width:768px){.topnav{display:block;}}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;z-index:3;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive button {width:100%;display:block;text-align:left;}
}