.container2{
  height: 50vh;
  width: 100vw;
  max-height: 800px;
  max-width: 1100px;
  min-height: 500px;
  min-width: 1000px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
}
.border{
  height: 369px;
  width: 290px;
  background: transparent;
  border-radius: 10px;
  transition: border 1s;
  position: relative;
  }
  .border:hover{
  	 border: 1px solid white;
  }
 

.card{
  height: 370px;
  width: 300px;
  background: grey;
  border-radius: 10px;
  transition: background 0.8s;
  overflow: hidden;
  background: black;
  box-shadow: 0 70px 63px -60px #000000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}
.card h2{
  opacity: 1;
}

.card0{
  background: url('../../media/TIC/teo.jpg') center center no-repeat;
  background-size: 300px;
}
 .card0:hover {
    background: url('../../media/TIC/teo.jpg') left center no-repeat;
    background-size: 650px;

    h2
      opacity: 1;

    .fa
      opacity: 1;
}

.card1{
  background: url('../../media/TIC/Erik.png') center center no-repeat;
  background-size: 300px;
}
 .card1:hover{
    background: url('../../media/TIC/Erik.png') left center no-repeat;
    background-size: 600px;

    h2
      opacity: 1;

    .fa
      opacity: 1;
}

.card2 {
  background: url('../../media/TIC/Sergio.jpg') center center no-repeat;
  background-size: 350px;
}
.card2:hover{
    background: url('../../media/TIC/Sergio.jpg') left center no-repeat;
    background-size: 600px;

    h2
      opacity: 1;

    .fa
      opacity: 1;
}
.card3 {
  background: url('../../media/TIC/js.jpg') center center no-repeat;
  background-size: 350px;
}
.card3:hover{
    background: url('../../media/TIC/js.jpg') left center no-repeat;
    background-size: 600px;

    h2
      opacity: 1;

    .fa
      opacity: 1;
}
.card4 {
  background: url('../../media/TIC/Lau.png') center center no-repeat;
  background-size: 300px;
}
.card4:hover{
    background: url('../../media/TIC/Lau.png') left center no-repeat;
    background-size: 500px;


    h2
      opacity: 1;

    .fa
      opacity: 1;
}
h1{
  color: white;
}
h2: hover{
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: black;
  margin: 20px;
  opacity: 0;
  transition: opacity 1s;
}
.fa:hover {
  opacity: 0;
  transition: opacity 1s;
}