body
{
  background: white;
}
.caja {
  font-family: Roboto, sans-serif;

}


a.lia
{
  text-decoration: none;
}
a.li
{
  text-decoration: none;
  display: block;
  padding-bottom: 21%; 
}

.padre
{
  width:80%;
  /* background-color:rgba(0,0,0,.2); */
  background-color: #363636;
  

  /* background-image: url(http://getwallpapers.com/wallpaper/full/c/b/0/23460.jpg);
  height: auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment:relative;
  background-size: cover; */


  display: flex;
  align-items: center;
  letter-spacing: 0.1em;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-self: center;
  flex-wrap: wrap;
  text-align: center;
margin: 0 auto;
  height: 320px;

}




p.dentro
{
  font-size: 1.5em;
  margin: 5% auto;
  color:#757575;
  font-weight:bold;
}




/* Container Tarjetas   */
.card-container {

  perspective: 1000;
  -ms-perspective: 1000;
  -webkit-perspective: 1000;
  -o-perspective: 1000;
  -moz-perspective: 1000;
}

.caja
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%;
    background-color: white;
    /* background-color:rgba(0,0,0,.3); */
    margin: 0 auto;
    padding: 40px 0  40px 0 ;
    border-radius: 7px;
}

img.imgh {
    max-width: 85%;

    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
  }

  
.card-container:hover .card,
.card-container.hover .card {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}

.card-container, 
.front, .back {
  margin: 0 auto;
  width: 300px;
  height: 345px;
  border-radius: 4px;
  text-align: center;
}

.card {
  transform-style: preserve-3d;
  -webkit-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;

  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  -ms-transition: 0.6s;
  transition: 0.6s;
  position: relative;
}

.front,
.back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility:     hidden;

  position: absolute;
  top: 0;
  left: 0;
  background-color: #FAFAFA;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px
  rgba(0,0,0,0.22);
}

.front {
  z-index: 2;
  transform: rotateY(0deg);
  -webkit-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
}

.back {
  transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
}

h2.tit2 {
  margin-top: -1px;
  font-weight:bold;
  font-size: 2em;
  letter-spacing: 2px;

  border-radius:3px 3px 3px 3px;
  height:50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:rgb(226,7,125);
    color:#fff!important;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
h1.tit
{
  display: flex;
  justify-content: center;
  text-align: center;
  color: #e2077d;
  letter-spacing: 2px;
}





@media screen and (max-width: 1176px)
{
  .card-container, 
  .front, .back 
  {

    margin: 0 auto;
    width: 250px;
    height: 290px;
    border-radius: 4px;
    text-align: center;
  }

  
  img.imgh {
    margin-top: -15px;
    max-width: 85%;

    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
  }

  h2.tit2
  {
    font-size: 1.8em;
  }


  .padre
  {
    width: 90%;
    background-color: #363636;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.1em;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
margin: 0 auto;
  height: 320px;
  }

  p.dentro
{
  font-size: 1.2em;
  margin: 5% auto;
  text-align: center;
}



}



@media screen and (max-width: 980px)
{
  .card-container, 
  .front, .back 
  {

margin: 0 auto;
    width: 210px;
    height: 250px;
    border-radius: 4px;
    text-align: center;
  }

  img.imgh {

    max-width: 85%;

    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
  }

  h2.tit2
  {
    font-size: 1.5em;
  }

  p.dentro
{
  font-size: 1.1em;
  margin: 5% auto;
}



a.li
{

  padding-bottom: 6%; 
}

}

@media screen and (max-width:896px)
{
  .padre
  {
    width: 100%;
    height: 350px;
  }

  p.dentro
{
  font-size: 1.1em;
  margin: 5% auto;
}



a.li
{
  padding-bottom: 6%; 
}

}


@media screen and (max-width: 840px)
{
  .card-container, 
  .front, .back 
  {

margin: 5% auto;
    width: 290px;
    height: 270px;
    border-radius: 4px;
    text-align: center;
  }

  img.imgh {

    max-width: 70%;

    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
  }

  h2.tit2
  {
    font-size: 1.9em;
  }
  .padre
  {
    height: 340px;
  }
  h1.tit
  {
    font-size: 1.8em;
  }

  p.dentro
{
  font-size: 1.3em;
  margin: 5% auto;
}


a.li
{
  padding-bottom: 5%; 
}
}

/* PX 770 FALLA   ARREGLADO*/
@media screen and (max-width:770px)
{
  .card-container, 
  .front, .back 
  {

margin: 5% auto;
    width: 290px;
    height: 270px;
    border-radius: 4px;
    text-align: center;
  }

  img.imgh {

    max-width: 70%;

    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;

  }

  h2.tit2
  {
    font-size: 1.9em;
  }
  .padre
  {
    height: 400px;
  }
  h1.tit
  {
    font-size: 1.8em;
  }

  p.dentro
{
  font-size: 1.3em;
  margin: 5% auto;
}



}



@media screen and (max-width: 750px)
{
  .card-container, 
  .front, .back 
  {

margin: 5% auto;
    width: 230px;
    height: 230px;
    border-radius: 4px;
    text-align: center;
  }

  img.imgh {

    max-width: 70%;

    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
  }
  h2.tit2
  {
    font-size: 1.6em;
  }

  
  img.image {
    width: 30%;
    height: 100%;;
    background-color: #fff;
  }




  .padre
  {
    height: 320px;

  }
  h1.tit
  {
    font-size: 1.7em;
  }

  p.dentro
{
  font-size: 1.1em;
  margin: 5% auto;
}
}
/* 686 */


/* 632 */
@media screen and (max-width:726px)
{


  .padre
  {
    height: 345px;
  }

  h1.tit
  {
    font-size: 1.7em;
  }



img.image {
  width: 35%;
  height: 100%;;
  background-color: #fff;
}


}



@media screen and (max-width:705px)
{
  .padre
  {
    height: 400px;
  }
  h1.tit
  {
    font-size: 1.7em;
  }

}
@media screen and (max-width: 607px)
{
  .card-container, 
  .front, .back 
  {

margin: 5% auto;
    width: 300px;
    height: 290px;
    border-radius: 4px;
    text-align: center;
  }

  img.imgh {

    max-width: 70%;

    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
  }

  
  img.image {
    width: 40%;
    height: 100%;
    background-color: #fff;
  }




  .padre
  {
    height: 365px;
  }

  h1.tit
  {
    font-size: 1.7em;
  }

  p.dentro
{
  font-size: 1.3em;
  margin: 5% auto;
}


a.li
{
  padding-bottom: 12%; 
}

}




@media screen and (max-width: 400px)
{
  .card-container, 
  .front, .back 
  {

    margin: 10% auto;
    width: 250px;
    height: 245px;
    border-radius: 4px;
    text-align: center;
  }

  img.image {
    width: 50%;
    height: 100%;
    background-color: #fff;
  }



  .padre
  {
    height: 350px;
  }
  h1.tit
  {
    font-size: 1.7em;
  }


a.li
{
  padding-bottom: 8%; 
}

p.dentro
{
  font-size: 1.1em;
}

}


@media screen and (max-width:370px)
{
  .padre
  {
    height: 350px;
  }

  h1.tit
  {
    font-size: 1.4em;
  }



}

@media screen and (max-width: 350px)
{
  .card-container, 
  .front, .back 
  {

margin: 5% auto;
    width: 200px;
    height: 220px;
    border-radius: 4px;
    text-align: center;
  }

  img.imgh {

    max-width: 70%;

    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
  }

  h2.tit2
  {
    font-size: 1.4em;
  }
 
  .padre
  {
    height: 330px;
  }

  img.image {
    width: 50%;
    height: 100%;
    background-color: #fff;
  }



  h1.tit
  {
    font-size: 1.4em;
  }

  p.dentro
{
  font-size: 1em;
  margin: 5% auto;
}

}