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

.Card3{
  position: relative;
  display:inline-block;
  height:270px;
  width: 100%;
  margin:0.7rem;
  overflow: hidden;
  background:#FFF;
 -moz-transition: 0.5s;-o-transition: 0.5s;-webkit-transition: 0.5s;transition: 0.5s;
 font-family: 'Sansita', sans-serif;
 border-radius:3px;
 
box-shadow: -1px 5px 13px 0px rgba(127,127,127,0.91);
-webkit-box-shadow: -1px 5px 13px 0px rgba(127,127,127,0.91);
-moz-box-shadow: -1px 5px 13px 0px rgba(127,127,127,0.91);
 }

.Card3 img{
  position: absolute;
   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(-85% + 40px);
  left: 0px;
  width: 100%;
  height:85%;
  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: 0.5em;}





@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: 0em 0em;}
  .Card3:hover img{top:30%;opacity: 0.5;}

  .Card3 .overlay{
    position: relative;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height:100%;
  }
  .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;}
}



<!------------------------------------>

.scrool{}
.scrool::-webkit-scrollbar {
    width: 0.5em;
}
 
.scrool::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
.scrool::-webkit-scrollbar-thumb {
  background-color: #CC3;
 }}