/* --- Card3 ---- */

.Card3{
  position: relative;
  display:inline-block;
  height:300px;
  width: 100%;
  margin:1rem;
  overflow: hidden;
  background: #000;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 30px 40px -3px;
  -moz-transition: 0.5s;-o-transition: 0.5s;-webkit-transition: 0.5s;transition: 0.5s;
 font-family: 'Sansita', sans-serif;
 }

.Card3 img{
  position: absolute;
   width: 100%;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%,-50%);
  -moz-transition: 0.5s;-o-transition: 0.5s;-webkit-transition: 0.5s;transition: 0.5s;
}
.Card3:hover img{top:30%;opacity: 0.5;}

.Card3 .overlay{
  position: absolute;
  bottom:calc(-80% + 40px);
  left: 0px;
  width: 100%;
  height:80%;
  background: #FFF;
  -moz-transition: 0.5s;-o-transition: 0.5s;-webkit-transition: 0.5s;transition: 0.5s;
  font-family: 'Sansita', sans-serif;
}
.Card3:hover .overlay{bottom:0px;}

.Card3 .overlay .line{width: 100%;text-align: left; padding:0em 0.6em; font-size:25px; font-family: 'Sansita', sans-serif;}
.Card3 .overlay .content{text-align: left;padding: 0em;}





@media screen and (max-width: 700px){

  /* --- Card1 ---- */

  .Card1{max-width: 100%;height: 400px;height: auto;}
  .Card1 .photo {float: none;height: 400px;width: 100%;}
  .Card1:hover .photo {-webkit-transform: none;-moz-transform: none;-ms-transform: none;-o-transform: none;transform: none;}
  .Card1:hover .details {left: -100%;}
  .Card1 .description {float:inherit;width: 100%;}
  .Card1 .description p {margin-bottom: 1em;}

  /* --- Card2 ---- */

  .Card2{
    position: relative;
    display:block;
    width: 100%;
    height: 300px;
    margin: 3em 0em;
    border-radius: 0px;
    box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: all .4s ease;
  }

  /* --- Card3 ---- */

  .Card3{width: 100%;height: auto;margin: 1em 0em;}
  .Card3:hover img{top:30%;opacity: 0.5;}

  .Card3 .overlay{
    position: relative;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 200px;
  }
  .Card3 img{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
  -webkit-transform: translate(-50%, 0%);-moz-transform: translate(-50%, 0%);-ms-transform: translate(-50%, 0%);-o-transform: translate(-50%, 0%);transform: translate(-50%,0%);
  }
  .Card3:hover .overlay{bottom:0px;}
  .Card3:hover img{top:50%;opacity: 1;}
}