@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    5% {
        opacity: 0.1;
    }
    55%{
        opacity: 1;
    }
    100% { 
        opacity: 1; 
     } 
}

body {     
  margin: 0;
  padding: 0;  
  height: 100vh;
  overflow-x: hidden;
  font: 12px Arial, sans-serif;
  color: #656565;
  /*background-color: #E8E8E0;*/
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
} 

.container{
  animation-name: fadeInAnimation;
  animation-timing-function: ease-in-out;
  animation-iteration: 1;
  animation-duration: 3s;
  animation-direction: alternate;
}
.maintitle{
  text-align: center;
  font-size: 25px;
  margin: 0;
}

.footer{
  text-align: center;
  font-size: 11px;
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .top {
    background: #E8E8E0;
    transform: rotate(-10deg);
    position: relative;
    top: -65px;
    left: -10px;
    height: 90px;
  }
  .container{
    margin-top: 25px;
  }
  .container .card {
    width: 100%;
    text-align: center;
  }
  .container .card.ficosalud {
    height: 110px;
  }
  .container .card .back-side{
    display: none;
  }
}
/* Small devices (portrait tablets and large phones, 600px and up) * /
@media only screen and (min-width: 600px) {
  .top {
    background: #E8E8E0;
    transform: rotate(-8deg);
    position: relative;
    top: -80px;
    left: -10px;
    height: 100px;
  }
  .container{
    margin-top: 5px;
  }
  .container .card {
    width: 100%;
    text-align: center;
  }
  .container .ficosalud {
    height: 110px;
  }
  .container .card .back-side{
    display: none;
  }
}*/

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {  
  .top {
    background: #E8E8E0;
    transform: rotate(-4deg);
    position: relative;
    top: -80px;
    left: -5px;
    height: 110px;
  }
  .wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
  } 
  .container {    
    display: flex;
    margin-top: 80px;
    justify-content: space-between;    
    -webkit-perspective: 800px;
            perspective: 800px;
  }
  .container .card {
    position: relative;
    width: 220px;
    height: 130px;
    color: white;
    cursor: pointer;
    transition: 1s ease-in-out;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
  }
  .container .card:hover {
    -webkit-transform: rotateY(0.5turn);
            transform: rotateY(0.5turn);
  }
  .container .card .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transition: 1s ease-in-out;
    -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
    display: flex;
    align-items: flex-end;
  }
  .container .card .item img {
    -o-object-fit: cover;
        object-fit: cover;
  }
  .container .card .back-side {
    display: flex;
    align-items: flex-end;
    -webkit-transform: rotateY(0.5turn);
            transform: rotateY(0.5turn);
  }
}