html,
      body {
        margin: 0 auto;
      }
#entrada {
  height: 100vh;
  overflow: hidden;
  display: flex;
  width: 100%;
  background-color: #000;
}

#q1, #q2{
  width: 55%;
  height: 100%;
  position: absolute;
  background-size: cover !important;
  background-position: center !important;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease;
}
#btn{
   transition: all 0.5s ease;
   max-width: 70%
}

#btn img{
  max-width: 100%;
}

#q1:hover #btn, #q2:hover #btn{
  transform: scale(1.2);
}

#q1 {
  clip-path: polygon(0 100%, 0 0, 96% 0, 80% 100%);
  left: 0;
  background: url('../img/1.jpg');
}

#q2 {
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0% 100%);
  right: 0;
  background: url('../img/2.jpg');
}


@media (max-width: 1000px){
  #entrada{
    flex-wrap: wrap;
  }
  #q2{
    clip-path: polygon(0% 3%, 100% 0, 100% 100%, 0% 100%);
    width: 100%;
    height: 50%;
    position: inherit;
  }
  #q1{
    width: 100%;
    height: 50%;
    clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 98%);
    position: inherit;
  }
}