.cam{max-width:1024px;margin:auto; display: flex;gap:20px;}

.cam .lf{flex:0 0 40%;
      background: azure;
    border: 2px solid #105e5e;
    border-radius: 4px;
    padding: 12px;

}
.cam .rt{flex:0 0 58%; text-align: center;}
#webcam-props .h2{
     font-size: 1.2rem;
    border-bottom: 2px solid #105e5e;
    padding-bottom: 10px;
}
.rt .h2{
    font-size: 1.2rem;
    padding-bottom: 10px;
}
.cam .rt .tst{background:rgb(234, 231, 231);padding:15px 100px; font-weight: bold; border:1px solid #666;cursor:pointer;}  
.props-table{width:100%;}
.props-table th{text-align: left; font-weight:500;width:60%;}   
#webcam-stream{background: url(images/noise.gif);width:100%;margin-top:30px;}
#webcam-resolutions{display:none;}
#webcam-notices{margin:0px; padding:0px; list-style:none;margin-bottom: 20px;}
#webcam-notices li{display: none;padding:10px;font-weight: 500;
    background-color:rgb(224, 250, 230);}
#webcam-controls{text-align:center;}
#webcam-selecter{width:100%;display: block;margin-bottom:10px;padding:6px;}
#webcam-visualizer {background: #000 url(images/noise.gif);width: 100%;height: 128px; }
#webcam-controls button {padding: 10px 20px; margin: 10px auto;display: block;min-width: 50%;cursor: pointer;}
#webcam-actions button {display: none;padding: 3px;margin-top: 10px; width: 100%;cursor: pointer;}

/* @media(max-width:1024px){
    
} */
@media(max-width:768px){
    .cam{
        flex-direction:column;
    }
    .cam .lf, .cam .rt{
        width:100%;
    }
    .cam .lf{
        order:2;
    }
    .cam .rt{
        order:1;
    }
}
@media(max-width:400px){
    .header .hh2{
        font-size: 20px;
    }
}