/* Domotic.CSS 2.1 by Jan Egil and Borge Refsnes. Do not remove this line. */

*{margin: 0; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 355px) {
     /* Div Reloj */
  .lg_clock {width: 36px; height: 36px;position: relative;} 
}
@media only screen and (max-width: 350px) {
     /* Div Reloj */
  .lg_clock {width: 0px; height: 0px;position: relative;} 
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

@media only screen and (min-height: 110px) {
 /* Paneles graphic*/
 .pnl_bgr { height:74px; background-color:#000000;margin: 2px; }  /* Alto panel grafico */
 /* .pnl_bgr { height:110px; background-color:#000000;margin: 2px; } */
 .pnl_spl { height:104px;} /* Espaciador lamp */
 .pnl_spls { height:6px;} /* Espaciador lamp sensor */ 
 .pnl_spld { height:50px;} /* Espaciador lamp dimmer */  
 /*Lamp*/
  .lamp_rgb{position:absolute;width: 50px;height: 50px;color: #000000;font-size: 16px;text-align: center;margin:4px;left: calc(50% - 25px );top: calc(50% - 25px );padding-top: 130px } 
   .lamp{position:absolute;width: 50px;height: 50px;color: white;font-size: 16px;text-align: center;margin:4px;left: calc(50% - 25px );top: calc(50% - 25px );padding-top: 15px } 
   /* Div Reloj */
 /*  .lg_clock {width: 0px; height: 0px;position: relative;} */
}
@media only screen and (min-height: 360px) {
 /* Paneles graphic*/
 .pnl_bgr { height:110px; background-color:#000000;margin: 2px; }  /* Alto panel grafico */
 /*Lamp*/
  .lamp_rgb{position:absolute;width: 80px;height: 80px;color: #000000;font-size: 16px;text-align: center;margin:4px;left: calc(50% - 40px );top: calc(50% - 40px );padding-top: 30px } 
  .lamp{position:absolute;width: 80px;height: 80px;color: white;font-size: 16px;text-align: center;margin:4px;left: calc(50% - 50px );top: calc(50% - 40px );padding-top: 30px } 

} 
@media only screen and (min-height: 768px) {
 /* Paneles graphic*/
 .pnl_bgr { height:110px; background-color:#000000;margin: 2px; }
  /*Lamp*/
   .lamp_rgb{position:absolute;width: 80px;height: 80px;color: #000000;font-size: 16px;text-align: center;margin:4px;left: calc(50% - 40px );top: calc(50% - 40px );padding-top: 30px } 
   .lamp{position:absolute;width: 80px;height: 80px;color: white;font-size: 16px;text-align: center;margin:4px;left: calc(50% - 40px );top: calc(50% - 40px );padding-top: 30px }
 
}
/* @media only screen and (min-height: 768px) {
 /* Paneles graphic*/
/* .pnl_bgr { height:160px; background-color:#000000;margin: 2px; }
  /*Lamp*/
 /*  .lamp_rgb{position:absolute;width: 100px;height: 100px;color: #000000;font-size: 16px;text-align: center;margin:4px;left: ca/*lc(50% - 50px );top: calc(50% - 50px );padding-top: 40px } 
   .lamp{position:absolute;width: 100px;height: 100px;color: white;font-size: 16px;text-align: center;margin:4px;left: calc(50% - 50px );top: calc(50% - 50px );padding-top: 40px }
 
} */