@import url(acer-font-435.css);
@import url(font-awesome.min.css);
@import url(font-predator.css);

* {
    margin: 0em;
    
}

body {
    font-family: "Acer Foco", sans-serif;
    background-image: linear-gradient(  rgba(0, 174, 205, 1),  rgba(0, 174, 205, 0), rgba(245, 245, 245));
    background-repeat: no-repeat;
}

#titleBar, #footerBar{
    background-color:  rgb(245, 245, 245);
    background-color:  rgba(128, 195, 67, 1);
    height: 1.5em;
}

#titleBar .sceneName {
  width: 100%;
  height: 100%;
  line-height: 30px;
  padding: 5px;
  background-color: var(--acer-color-rgb);
  background-color: var(--acer-color-rgba);

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

h1 {
    color:  rgb(245, 245, 245);
    text-align: center;
    font-size: 1em;
}

#footerBar{
    position: relative;
    bottom: 25%;
}
#footerBar > p{
    color:  rgb(245, 245, 245);
    text-align: center;
    font-size: .9em;
}

#acer-city{
    position: relative;
    text-align: center;
}


#acer-city #acer-cityimage {
    width: 100%;
}

.button-link{
    text-decoration: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
}
 
.link-image{
    width: 2.5rem;
    height: 2.5rem;
}


.monitores-proyectores {
    position: absolute;
    bottom: 25%;
    left: 15%;
  }
  
  /* Top left text */
  .google {
    position: absolute;
    bottom: 48%;
    left: 10%;
  }
  
    /* Top left text */
    .conceptd {
        position: absolute;
        bottom: 35%;
        left: 30%;
      }

  /* Top right text */
  .gaming {
    position: absolute;
    top: 35%;
    right: 25%;
  }
  
  /* Bottom right text */
  .accesorios {
    position: absolute;
    bottom: 45%;
    right: 8%;
  }
  
  .vero {
    position: absolute;
    bottom: 25%;
    right: 10%;
  }
  /* acer-for-business text */
  .comercial {
    position: absolute;
    top: 35%;
    left: 58%;
    transform: translate(-35%, -58%);
  }

    /* acer-for-business text */
    .consumo {
        position: absolute;
        top: 25%;
        left: 45%;
        transform: translate(-25%, -45%);
      }






      #sceneListToggle {
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        padding: 5px;
        background-color: var(--acer-color-rgb);
        background-color: var(--acer-color-rgba);
      }
      
      .mobile #sceneListToggle {
        width: 30px;
        height: 30px;
      }
      
      #sceneListToggle .text {
        position: absolute;
        top: 5px;
        left: 15px;
        width: 100%;
        line-height: 30px;
      }
      
      #sceneListToggle .icon {
        position: absolute;
        top: 5px;
        right: 5px;
        left: 5px;
        width: 25px;
        height: 25px;
      }
      
      .mobile #sceneListToggle .icon {
        top: 5px;
        right: 5px;
      }
      
      #sceneListToggle .icon.on {
        display: none;
      }
      
      #sceneListToggle .icon.off {
        display: block;
      }
      
      #sceneListToggle.enabled .icon.on {
        display: block;
      }
      
      #sceneListToggle.enabled .icon.off {
        display: none;
      }
      
      #sceneList {
        position: absolute;
        top: 0;
        left: -200px;
        padding-top: 30px;
        width: 200px;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        margin-left: 20;
        -webkit-transition: margin-left 0.5s ease-in-out;
        transition: margin-left 0.5s ease-in-out;
      }
      
      .mobile #sceneList {
        padding-top: 30px;
      }
      
      #sceneList .scenes {
        width: 100%;
        background-color: var(--acer-color-rgb);
        background-color: var(--acer-color-rgba);
      }
      
      .mobile #sceneList {
        width: 100%;
        height: 100%;
        left: -100%;
      }
      
      .mobile #sceneList.enabled {
        margin-left: 100%;
      }
      
      .mobile #sceneList .scenes {
        height: 100%;
      }
      
      #sceneList.enabled {
        margin-left: 200px;
      }
      
      #sceneList .scene {
        display: block;
        width: 100%;
        height: 30px;
      }
      
      .mobile #sceneList .scene {
        height: 30px;
      }
      
      #sceneList .scene .text {
        width: 100%;
        height: 100%;
        padding: 0 15px;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .mobile #sceneList .scene .text {
        line-height: 30px;
      }
      
      .no-touch #sceneList .scene:hover {
        background-color: var(--acer-color-rgb);
        background-color: var(--acer-color-rgba);
      }
      
      #sceneList .scene.current {
        background-color: var(--acer-color-rgb);
        background-color: var(--acer-color-rgba);
      }
      
      /* Hide scene list when only a single scene exists */
      body.single-scene #sceneList,
      body.single-scene #sceneListToggle {
        display: none;
      }