.landscape{
  background: #fff;
  display: none;
}
#body{
  overflow: hidden;
}
@media  (orientation: portrait) {
  #body{
    overflow: hidden;
    background-color: #fff !important;
  }
  h1{
    color:  #000;
  }
  .landscape{
    padding: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: block;
    z-index: 120;
    word-wrap: break-word;
  }
  .landscape-img{
      padding: 1rem ;
    width: 100%;
    height: 100%;
    z-index: 200;
    background: url('../img/fresam-cel2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .container-fluid{
    display: none;
  }
 }
@media  (max-width: 1100px) and (orientation: landscape){
#b1, #b2, #b4 , .fresa{
  display: none;
}
#webcam{
  position: absolute;
  left: 0;
  z-index: -1;
}

}

@media  (max-width: 331px){
  h1{
    font-size: 21px;
  }

}