.containerqsomos {

 display:block;
 margin:auto;
       
position:relative;
width: 1200px;
height: 800px;
}

@media (max-width: 480px ) {
    .containerqsomos  {
display: auto;       
width: 350px;
       height: 290px;
       margin-top: -8rem;
       margin-bottom: 40rem;
    }
}


@media (max-width: 700px ) {
    .containerqsomos  {
display: auto;       
width: 350px;
       height: 290px;
       margin-top: -8rem;
       margin-bottom: 55rem;
    }
}

.containerqsomos .cara{

 display: flex;
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width:100% ;

}


.containerqsomos .cara span {

 height: 600px;
 width:100% ;
transition: .5s;

}

.containerqsomos .cara1 span {

background-image: url(https://i.ibb.co/GFJ4WG2/qsomosportada.jpg);
transform-origin: top;

}

.containerqsomos:hover .cara1 span{

    transform: rotateX(90deg) translateY(-50%);
}


.containerqsomos .cara2 span {

  background-image: url(https://i.ibb.co/Fz26v7g/qsomosportada1.jpg);
  transform-origin: bottom;
   transform:rotateX(90deg) translateY(50%); 
}


.containerqsomos:hover .cara2 span{

  transform: rotateX(0deg) translateY(0);

}


.containerqsomos .cara span:nth-child(1){

    background-position-x: 0;
    transition-delay: 0s ;
}

.containerqsomos .cara span:nth-child(2){

    background-position-x: -200px;
    transition-delay: .1s ;
}

.containerqsomos .cara span:nth-child(3){

    background-position-x: -400px;
    transition-delay: .2s ;
}

.containerqsomos .cara span:nth-child(4){

    background-position-x: -600px;
    transition-delay: .3s ;
}


/*Fuente del parraho para h3*/

h3 {text-shadow: 7px 4px 5px rgb(113, 113, 114);}