body{
    /* width:100%; */
    /* height:100%; */
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    background: url(../images/fondo.png) no-repeat center center fixed;
    margin: 0;
    padding: 0;
  }
  
  @media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}
  
  /*
  ******** Inicio modificadores chrome ***************
  */
  
  @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
      #contenedor_logo{
          transform: translate(7%, 19%) !important;
          transform: translate(11%, -5.5%) !important;
      }
      #intro{
        width: 50vw !important;
        height: 77vh !important;
        margin-top: 6% !important;
        margin-left: 25% !important;
      }
      #contenedor_realizador1{
          width: 28.2% !important;
          height: 27% !important;
          font-size: 62% !important;
          width: 63% !important; 
      }
      #descripcion_realizador1{
          margin-top: -7% !important;
          margin-right: 5% !important;
          text-size: 61% !important;
          width: 63% !important;
      }
      #contenedor_gafas{
          margin-top: % !important;
      }
      #contenedor_menu1{
          margin-top: -3% !important;
      }
      
#linea_terminal {
    width: 12% !important;
    height: 25% !important; 
    margin-left: 73.9% !important;
    margin-top: 11.5% !important;
}
}
 /*********      fin modificadores chrome    **********/
  
  
/**********      Modificadores para Firefox ***********/
  @-moz-document url-prefix() {
  
  body{
      overflow: hidden !important;
      display: flex !important !important;
      flex-wrap: wrap !important;
      margin: 0 !important;
      padding: 0 !important;
  }
  
  html {
      margin:   0 auto !important;
      min-height: 1vh !important;
      min-width: 1vw !important;
      max-width: 99vw !important;
      max-height: 99vh !important;
  }
  
  #contenedor_logo{
    width: 26vh !important;
    height: 6vw !important;
    transform: translate(7%, -4.7%) !important;
    margin-left: 11% !important;
  }
  
  
  #contenedor_menu1{
    width: 13.2% !important;
    height: 7.9% !important;
    margin-left: 71.1% !important;  
    margin-top: -3% !important;
  }
  
  #contenedor_menu2{
      width: 6.9% !important;
      height: 00.2% !important;
      margin-left: 65.8% !important;
      margin-top: -4.39% !important;
  }
  
  #contenedor_menu3{
     width: 8% !important;
      height: 00.1% !important;
     margin-left: 59.6% !important;
    margin-top: -4.82% !important;
}
  
  #contenedor_menu4{
      width: 8% !important;
      height: 0.09% !important;
      margin-top: -4.86% !important;
      margin-left: 53.65% !important;
  }

    #linea_terminal {
        width: 13% !important;
        height: 26% !important;
        margin-top: 12.5% !important;
        margin-left: 73.9% !important;
    }
  
  #linea_bitacora{
    width: 7% !important;
    height: 27% !important;
    margin-top: 21.6% !important;
    margin-left: 77.8% !important;
  }
  
  #contenedor_gafas{
   background-repeat: no-repeat !important; 
   background-size: 96%, 100% !important; 
   width: 100vw !important;
   height: 100vh !important;
   position: absolute !important;
   z-index: 107 !important;
   overflow: hidden !important;
   background-position-y: center !important;
   background-position-x: center !important;
   margin-top:0.1% !important;
  }
  
  #intro{
  background-repeat: no-repeat !important;
  width: 51% !important;
  height: 75% !important;
  margin-top: 4% !important;
  margin-left: 25% !important;
  background-size: 100% !important;
  cursor:pointer;
  }
  
  #boton_p {
  width: 17vh !important;
  height: 17vh !important;
  margin-left: 72% !important;
  margin-top: 7% !important;
  }
  
  #boton_b {
  width: 14vh !important;
  height: 14vh !important;
  display: block !important;
  margin-left: 78.2% !important;
  margin-top: 14.6% !important;
  }	
  
  #boton_t {	
  width: 4.6vw !important;
  height: 10vh !important;
  float: right !important;
  margin-left: 81% !important;
  margin-top: 9% !important;
  
  }
  
  #contenedor_redes_sociales1{
  width: 5% !important;
  height: 9.5% !important;
  float: right !important;
  margin-top: 40% !important;
  margin-left: 87% !important;
  }
  
  #contenedor_redes_sociales2{
  width: 5.5% !important;
  height: 10.7% !important;
  margin-top: 43.3% !important;
  margin-left: 81% !important;
  }
  
#contenedor_proyectos_barra_horizontal {
    width: 35.4% !important;
    height: 9.2% !important; 
    margin-left: 3.1% !important;
    margin-top: -2% !important;
}
}
  /******************Fin modificadores Firefox *************/

  #contenedor_logo{
      width: 12%;
      height: 9%;
      transform: translate(7%, 0%);
      z-index: 99;
      margin-left: 11%;
      cursor: pointer;
      z-index: 9999;
      margin-top: -0.2%;
  }
  
  
  
  #contenedor_menu1{
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 13%;
      height: 6.8%;
      cursor: pointer;
      margin-top: -1.4%;
      margin-left: 70%;
      z-index: 1000;
  }
  
  #contenedor_menu2{
  width: 6.9%;
      height: 00.2%;
  
      display: block;
      cursor: pointer;
      margin-left: 64.6%;
      margin-top: -4.3%;
      z-index: 1001;
      }
  
  #contenedor_menu3{
     width: 8%;
      height: 00.1%;
   
      display: block;
      cursor: pointer;
      margin-left: 58.4%;
      margin-top: -4.8%;
      z-index: 1002;
  }
  
  #contenedor_menu4{
  width: 8%;
      height: 00.1%;
      display: block;
      cursor: pointer;
      margin-left: 52.5%;
      margin-top: -4.8%;
      z-index: 1003;
  }
  
  #linea_terminal{
      width: 14%;
      height: 25%;
      position: absolute;
      
      margin-top: 15.5%;
      visibility: hidden;
      /* float: right; */
      margin-left: 74.5%;
     z-index: 104;
  }
  
  #linea_bitacora{
   width: 9%;
   height: 33%;
   position: absolute;
   margin-top: 19%;
   visibility: hidden;
   /* float: right; */
   margin-left: 78.5%;
   z-index: 104;
  }
  
  
  
  #contenedor_gafas{
   background-image: url("../images/marco-gafas.png");
   background-repeat: no-repeat;
   background-size: 94%, 80%;
   width: 100%;
   height: 100%;
   position: absolute;
   /* margin-top: 2%; */
   z-index: 107;
   background-attachment: initial;
   background-position: center;
  }
  
  #intro{
  background-image: url(../images/muestra-intro.png);
      background-repeat: no-repeat;
      width: 56%;
      height: 75%;
      margin-top: 4%;
      margin-left: 23%;
      background-size: 100%;
      cursor: pointer;
  }
  
  #boton_p {
      z-index: 108;
      width: 9vw;
      height: 18vh;
      background-image: url('../images/btn01-proyecto.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      float: right;
      position: absolute;
      cursor: pointer;
      margin-left: 70%;
      margin-top: 6%;
      display: block !important;
      justify-content: center !important;
      align-items: center !important;
  }
  
  
  
  #boton_b {
  width: 6.6vw;
  height: 13vh;
  background-image: url('../images/btn02-bitacora.png');
  background-size: 100% 100%;
  float: right;
  display: block;
  cursor: pointer;
  margin-left: 77.2%;
  margin-top: 13.5%;
  position: absolute;
  z-index: 109;
  }	
  
  #boton_t {
  width: 4.6%;
  height: 9.6%;
  background-image: url('../images/btn03-terminal.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  float: right;
  display: block;
  position: absolute;
  cursor: pointer;
  margin-left: 80%;
  margin-top: 8%;
  z-index: 110;
  }
  
  #boton_t #boton_p #boton_b{
   display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  .sombra_boton {
      outline-color: rgba(75, 245, 20, 0.5) !important;
      transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) !important;
      border-radius: 50%;
  }
  
  .sombra_boton:hover {
    box-shadow: inset 0 0 20px rgba(49, 138, 172, 0.8), 0 0 20px rgba(49, 138, 172, 0.8) !important;
    outline-color: rgba(49, 138, 172, 0) !important;
    outline-offset: 80px !important;
    text-shadow: 2px 2px 8px #fff !important;
    border-shadow: 3px 3px 8px #fff !important;
  }
  
  #boton_p:hover{
      background-image: url('../images/Botones/btn-base-proyecto.png'), 
                                url('../images/Botones/btn-base-proyecto.png'), 
                                url('../images/Botones/btn-bitacora-girar01.png');
                                transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) !important;
  }
  
  #boton_b:hover{
      background-image: url('../images/Botones/btn-base-bitacora.png'), 
                                url('../images/Botones/btn-base-bitacora.png'), 
                                url('../images/Botones/btn-bitacora-girar02.png') ;
  }
  
  #boton_t:hover{
      background-image: url('../images/Botones/btn-base-terminal.png'), 
                                url('../images/Botones/btn-base-terminal.png'), 
                                url('../images/Botones/btn-terminal-girar-02.png') ;
  }
  
  
  .contenedor-principal{
      width: 60%;
      height: 55%;
  }
  
  #contenedor_redes_sociales1{
  width: 5%;
  height: 9.5%;
  float: right;
  margin-top: 39.2%;
  margin-left: 85.9%;
  position: absolute;
  cursor: pointer;
  z-index: 111;
  }
  
  #contenedor_redes_sociales2{
      width: 5.5%;
      height: 10.7%;
      margin-top: 42.5%;
      margin-left: 79.5%;
      cursor: pointer;
      z-index: 8989;
      position: absolute;
  }
  
  .sombra {
      outline-color: rgba(75, 245, 20, 0.5) !important;
      transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) !important;
      border-radius: 50%;
  }
  
  object{
      width: 81%;
      height: 93%;
      margin-top: 0%;
      margin-left: 4%;
      overflow: hidden;
  }
  
    .frame {
      height: 200px;
      width: 200px;
      overflow: hidden;
    }
    .zoomin img {
      height: 200px;
      width: 200px;
      -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
      transition: all 2s ease;
    }
    .zoomin img:hover {
      width: 300px;
      height: 300px;
    }
  
  .zoom{
 transition:transform .2s;/* Animation */
}

.zoom:hover{
 transform:scale(1.2);/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}