.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #4fb4947d;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

/*.container:hover .overlay {
  bottom: 0;
  height: 0%;
}*/
body {
  background-color: tan;
}
.mediaquery{
  border:1px solid #black; 
  padding: 25px;
  background: #f6f6f6;
}
@media screen and (max-width: 600px) {
  body {
    background: #1c1b1b !important;
  }
  .mediaquery{
    background: #1c1b1b !important;
    border:1px solid #262626;
  }
}
@media screen and (max-width: 600px) {
  body {
    background: #1c1b1b  !important;
  }
  .mediaquery{
    background: #1c1b1b  !important;
    border:1px solid #262626;

  }
}
.text {
  white-space: nowrap; 
  color: blue;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
a:focus { outline: none;
    text-decoration: none;
    color: white;
    /*pointer-events: none;*/
cursor: default;
     } 

    .btn-infop{
      position: fixed !important;
      z-index: 100;
      padding: 2px;
      border-radius: 100%;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    right: 0px;
    bottom:80%;
      /*align-items: right;*/
    }
.btn-infop:hover{
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    transition-duration:0.4s;
    transition-property: transform;
} 
.btn-materialinsumo{
    /*border-top: 22px;*/
    /*top:55px;
    position: fixed !important;
    z-index: 100;
    right: 0px;
    bottom:80%;
    width: 60px;
    height: 60px;*/
    
    display:scroll;
        position:fixed;
        z-index: 100;
        right: 0;
        bottom:30px;
        right:0px;
       

}
/*////////*/

.qr-code-generator {
width: 500px;
margin: 0 auto;
}

.qr-code-generator * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#qrcode {
width: 12px;
height: 128px;
margin: 0 auto;
text-align: center;
}

#qrcode a {
font-size: 0.8em;
}

.qr-url, .qr-size {
padding: 0.5em;
border: 1px solid #ddd;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.qr-url {
width: 79%;
}

.qr-size {
width: 20%;
}

.generate-qr-code {
display: block;
width: 100%;
margin: 0.5em 0 0;
padding: 0.25em;
font-size: 1.2em;
border: none;
cursor: pointer;
background-color: #e5554e;
color: #fff;
}