@import url('https://fonts.googleapis.com/css?family=Poppins');
body, html{
  margin: 0;
  background: #2b2927;
  font-family: 'Poppins', sans-serif;
}
h1{
  text-align: center;
  color:white;
}
.work-container-all{
  width: fit-content;
  margin: 20px auto;
  height: auto;
}
.work-container{
  width: calc(33% - 6px);
  overflow:hidden;
  height: fit-content;
  margin:3px;
  padding: 0;
  display:block;
  position:relative;
  float:left;
}
img{
  width: 100%;
  transition-duration: .3s;
  max-width: 100%;
  display:block;
  overflow:hidden;
  cursor:pointer;
}
.title{
  position:absolute;
  display:block;
  cursor:pointer;
  top: 35%;
  display: none;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 1.6em;
  text-shadow: 1px 5px 10px black;
  transition-duration: .3s;
}
.text{
  position:absolute;
  top: 70%;
  cursor:pointer;
  max-width: 80%;
  text-align:center;
  left: 50%;
  text-shadow: 1px 5px 10px black;
  font-size: 1em;
  display:none;
  margin-right: -50%;
  transition-duration: .3s;
  transform: translate(-50%, -50%) 
}
.work-container:hover img{
  transform: scale(1.2);
  transition-duration: .3s;
  /* filter: grayscale(50%);
  opacity: .7; */

}
.work-container:hover span{
    color:white;
    display: block;
    transition-duration: .3s;
  }

  .work-container:hover img#project1:hover{
    content: url("../images/content/tailor/project1_before.png");
  }
  .work-container:hover img#project2:hover{
    content: url("../images/content/tailor/project2_before.png");
  }
 .work-container:hover img#project3:hover{
    content: url("../images/content/tailor/project3_before.png");
  }
  .work-container:hover img#project4:hover{
    content: url("../images/content/tailor/project4_before.jpeg");
  }
  .work-container:hover img#project5:hover{
    content: url("../images/content/tailor/project5_before.jpeg");
  }
  .work-container:hover img#project6:hover{
    content: url("../images/content/tailor/project6_before.jpeg");
  }
.work-container:hover img#project7:hover{
  content: url("../images/content/tailor/project7_before.jpeg");
}
  .work-container:hover img#project8:hover{
    content: url("../images/content/tailor/project8_before.png");
  }
  .work-container:hover img#project9:hover{
    content: url("../images/content/tailor/project9_before.png");
  }
  .work-container:hover img#project10:hover{
    content: url("../images/content/tailor/project10_before.jpeg");
  }

  .work-container:hover img#project11:hover{
    content: url("../images/content/tailor/project11_before.jpeg");
  }
  .work-container:hover img#project12:hover{
    content: url("../images/content/tailor/project12_before.jpg");
  }
  .work-container:hover img#project13:hover{
    content: url("../images/content/tailor/project13_before.jpg");
  }
  .work-container:hover img#project14:hover{
    content: url("../images/content/tailor/project14_before.jpeg");
  }
  .work-container:hover img#project15:hover{
    content: url("../images/content/tailor/project15_before.jpg");
  }

  .work-container:hover img#project16:hover{
    content: url("../images/content/tailor/project16_before.jpg");
  }
  .work-container:hover img#project17:hover{
    content: url("../images/content/tailor/project17_after.jpg");
  }

  .work-container:hover img#project19:hover{
    content: url("../images/content/tailor/project19_before.jpg");
  }

  @media only screen and (max-width: 900px) {
      .work-container {
          width: calc(50% - 6px);
      }
  }
  @media only screen and (max-width: 400px) {
      .work-container {
          width: 100%;
      }
}