#layerControles h4 {
    font-size: 1.3rem;
    color: black;
    font-family: 'TeXGyreAdventorRegular';
}

.grid-1-3 {
    display: grid;
    grid-template-columns: 1.2fr 2.8fr;
    grid-gap: 15px;
}
.yellow {
    color: #edb11e;
}
.img_left {
    width: auto;
    float: left;
    margin: 5px 10px 5px 5px;
}

.fa-lightbulb-on {
    font-size: 25px;
}
#layerControles {
    position: sticky;
    top: 0;
    align-self: start;
    width: 100%;
    margin: 0 auto 10px auto;
    padding: 25px 0;
}
#layeredImages {
    background-image: url("../images/UETNMap25-baseMap.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    width: 100%;
    height: 1133px;
    margin: 15px auto 10px auto;
}
#img_layer_1,
#img_layer_10,
#img_layer_11,
#img_layer_12,
#img_layer_13,
#img_layer_2,
#img_layer_3,
#img_layer_4,
#img_layer_5,
#img_layer_6,
#img_layer_7,
#img_layer_8,
#img_layer_9 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.checkbox {
    float: left;
    margin: 5px;
    width: 297px;
    height: 25px;
}
label {
    font-family: 'TeXGyreAdventorRegular';
    width: 297px;
    border-radius: 3px;
    font-size: 16px;
}
input[type="checkbox"]:empty {
    margin-left: -9999px;
}
input[type="checkbox"]:empty ~ label {
    position: relative;
    float: left;
    line-height: 1.5em;
    text-indent: 3.25em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input[type="checkbox"]:empty ~ label:before {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    content: "";
    width: 2.5em;
    border-radius: 3px 0 0 3px;
}
input[type="checkbox"]:checked ~ label:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f00c";
    text-indent: 0.9em;
    color: #fff;
}
#oneg input[type="checkbox"]:checked ~ label:before,
#oneg input[type="checkbox"]:empty ~ label:before {
    background: #f7941d;
}
#oneg label {
    border: 1px solid #f7941d;
}
#twohundm input[type="checkbox"]:checked ~ label:before,
#twohundm input[type="checkbox"]:empty ~ label:before {
    background: #987db9;
}
#twohundm label {
    border: 1px solid #987db9;
}
#tenge input[type="checkbox"]:checked ~ label:before,
#tenge input[type="checkbox"]:empty ~ label:before {
    background: #009fda;
}
#tenge label {
    border: 1px solid #009fda;
}
#tenhund input[type="checkbox"]:checked ~ label:before,
#tenhund input[type="checkbox"]:empty ~ label:before {
    background: #d5af34;
}
#tenhund label {
    border: 1px solid #d5af34;
}
#tengb input[type="checkbox"]:checked ~ label:before,
#tengb input[type="checkbox"]:empty ~ label:before {
    background: #3bb54a;
}
#tengb label {
    border: 1px solid #3bb54a;
}
#broadcast input[type="checkbox"]:checked ~ label:before,
#broadcast input[type="checkbox"]:empty ~ label:before {
    background: #dfddd9;
}
#broadcast label {
    border: 1px solid #dfddd9;
}
#twenty input[type="checkbox"]:checked ~ label:before,
#twenty input[type="checkbox"]:empty ~ label:before {
    background: #a256a2;
}
#twenty label {
    border: 1px solid #a256a2;
}
#fourty input[type="checkbox"]:checked ~ label:before,
#fourty input[type="checkbox"]:empty ~ label:before {
    background: #0054a6;
}
#fourty label {
    border: 1px solid #0054a6;
}
#onehund input[type="checkbox"]:checked ~ label:before,
#onehund input[type="checkbox"]:empty ~ label:before {
    background: #ed1c24;
}
#onehund label {
    border: 1px solid #ed1c24;
}
#fourhund input[type="checkbox"]:checked ~ label:before,
#fourhund input[type="checkbox"]:empty ~ label:before {
    background: #313183;
}
#fourhund label {
    border: 1px solid #313183;
}
#pop input[type="checkbox"]:checked ~ label:before,
#pop input[type="checkbox"]:empty ~ label:before {
    background: #000;
}
#pop label {
    border: 1px solid #000;
}
#health input[type="checkbox"]:checked ~ label:before,
#health input[type="checkbox"]:empty ~ label:before {
    background: #000;
}
#health label {
    border: 1px solid #000;
}
#location input[type="checkbox"]:checked ~ label:before,
#location input[type="checkbox"]:empty ~ label:before {
    background: #000;
}
#location label {
    border: 1px solid #000;
}
input[type="checkbox"]:focus ~ label:before {
    box-shadow: 0 0 0 3px #999;
}
@media (max-width: 1200px) {

  #layeredImages {
    height: 775px;
}  
}
@media (max-width: 992px) {
#layerControles {
    padding: 0;
}
    
    #layeredImages {
    height: 542px;
}
    
}

@media (max-width: 768px) {
.grid-1-3 {
    grid-template-columns: 1fr;
}
    
.checkbox {
    margin: 5px 25px 5px 0;
    width: 290px;
} 
label {
    width: 290px;
    font-size: 15px;
}       
    
#layerControles {
    position:relative;
    padding: 0;
    margin:0;
}
 
    #layeredImages {
    height: 587px;
        margin:0;
}
input[type="checkbox"]:empty ~ label {
    text-indent: 2.5em;
}    
    
 input[type="checkbox"]:empty ~ label:before {
    width: 2em;
}
  input[type="checkbox"]:checked ~ label:before {
     text-indent: 0.6em;
}  
}
@media (max-width: 576px) {
    #layeredImages {
    height: 587px;
}
    
    .checkbox {
    width: 275px;
} 
label {
    width: 275px;
    font-size: 15px;
} 
}
    
@media (max-width: 450px) {
    #layeredImages {
    height: 405px;
}
    
#layerControles {
    width: 313px;
    margin: 0 auto 0 auto;
}      
    
    .checkbox {
    width: 313px;
} 
label {
    width: 313px;
    font-size: 16px;
}     
   
}

@media (max-width: 390px) {
    .grid-1-3 {
    margin-bottom: 35px;
}
    
#layerControles {
    width: 250px;
    margin: 0 auto 0 auto;
}    
    
    #layeredImages {
    height: 382px;
         margin-bottom: 75px;
}
    
    .checkbox {
    width: 290px;
} 
label {
    width: 290px;
    font-size: 16px;
}     
   
}