/* cabecera */

.menupscb {
    margin-left: 5%;
  }
  .pscb  img{
      width: 26dvh;
      margin-left: 15%;
  }
  
  .menua a{
      color: rgb(28, 62, 116);
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      font-size: 107%;
  }
  .menua a:hover{
      background-color: rgb(188, 214, 255);
      color: rgb(28, 62, 116);
  }
  
  .titu1:hover {
    background-color: rgb(188, 214, 255);
  }
  
  .titu2:hover {
    background-color: rgb(188, 214, 255);
  }
  
  .titu3:hover {
    background-color: rgb(188, 214, 255);
  }
  
  .titu4:hover {
    background-color: rgb(188, 214, 255);
  }
  
  .titu5:hover {
    background-color: rgb(229, 237, 250);
  }
  
  .boton{
    text-align: center;
    width: 20dvh;
  }
  
  .boton a button{
    color: rgb(28, 62, 116);
    text-decoration: none;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 140%;
  }
  
  .boton a button:hover{
    color: rgb(237, 41, 59);
  }
  
  /* fin cabecera */

  /* tarjetas de redes */

  .tarjeta2 {
    position: relative;
    width: 300px;
    height: 340px;
    margin: 20px;
  }
  
  .tarjeta2 .face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    transition: .5s;
  }
  
  .tarjeta2 .front {
   text-align: center;
    background-color: rgb(237, 41, 59);
    transform: perspective(600px) rotateY(0deg);
    box-shadow: 0 5px 10px #000;
  }
  
  .tarjeta2 .front img {
    margin-top: 26%;
    width: 55%;
    height: 50%;
  }
  
  .tarjeta2 .front h3 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    color: #fff;
    background: rgba(0,0,0,.4);
    text-align: center;
  }
  
  .tarjeta2 .back {
    transform: perspective(600px) rotateY(180deg);
    background: rgb(237, 41, 59);
    padding: 15px;
    color: #f3f3f3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    box-shadow: 0 5px 10px #000;
  }
  
  .tarjeta2 .back .link {
    height: 50px;
    line-height: 50px;
    background: rgba(0,0,0,.4);
  }
  
  .tarjeta2 .back .link a {
    font-size: 120%;
    text-decoration: none;
    color: #f3f3f3;
  }
  
  .tarjeta2 .back h3 {
    font-size: 30px;
    margin-top: 20px;
    letter-spacing: 2px;
  }
  
  .tarjeta2 .back p {
    letter-spacing: 1px;
  } 
  
  .tarjeta2:hover .front {
    transform: perspective(600px) rotateY(180deg);
  }
  
  .tarjeta2:hover .back {
    transform: perspective(600px) rotateY(360deg);
  }
  


  .tarjeta3 {
    position: relative;
    width: 300px;
    height: 344px;
    margin: 20px;
  }
  
  .tarjeta3 .face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    transition: .5s;
  }
  
  .tarjeta3 .front {
   text-align: center;
    background-color: rgb(237, 41, 59);
    transform: perspective(600px) rotateY(0deg);
    box-shadow: 0 5px 10px #000;
  }
  
  .tarjeta3 .front img {
    margin-top: 10%;
    width: 80%;
    height: 80%;
  }
  
  .tarjeta3 .front h3 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    color: #fff;
    background: rgba(0,0,0,.4);
    text-align: center;
  }
  
  .tarjeta3 .back {
    transform: perspective(600px) rotateY(180deg);
    background: rgb(237, 41, 59);
    padding: 15px;
    color: #f3f3f3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    box-shadow: 0 5px 10px #000;
  }
  
  .tarjeta3 .back .link {
    height: 50px;
    line-height: 50px;
    background: rgba(0,0,0,.4);
  }
  
  .tarjeta3 .back .link a {
    font-size: 120%;
    text-decoration: none;
    color: #f3f3f3;
  }
  
  .tarjeta3 .back h3 {
    font-size: 30px;
    margin-top: 20px;
    letter-spacing: 2px;
  }
  
  .tarjeta3 .back p {
    letter-spacing: 1px;
  } 
  
  .tarjeta3:hover .front {
    transform: perspective(600px) rotateY(180deg);
  }
  
  .tarjeta3:hover .back {
    transform: perspective(600px) rotateY(360deg);
  }
  


  .tarjeta4 {
    position: relative;
    width: 300px;
    height: 344px;
    margin: 20px;
  }
  
  .tarjeta4 .face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    transition: .5s;
  }
  
  .tarjeta4 .front {
   text-align: center;
    background-color: rgb(237, 41, 59);
    transform: perspective(600px) rotateY(0deg);
    box-shadow: 0 5px 10px #000;
  }
  
  .tarjeta4 .front img {
    margin-top: 30%;
    width: 80%;
    height: 50%;
  }
  
  .tarjeta4 .front h3 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    color: #fff;
    font-size: 140%;
    background: rgba(0,0,0,.4);
    text-align: center;
  }
  
  .tarjeta4 .back {
    transform: perspective(600px) rotateY(180deg);
    background: rgb(237, 41, 59);
    padding: 15px;
    color: #f3f3f3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    box-shadow: 0 5px 10px #000;
  }
  
  .tarjeta4 .back .link {
    height: 50px;
    line-height: 50px;
    background: rgba(0,0,0,.4);
  }
  
  .tarjeta4 .back .link a {
    font-size: 120%;
    text-decoration: none;
    color: #f3f3f3;
  }
  
  .tarjeta4 .back h3 {
    font-size: 25px;
    margin-top: 20px;
    letter-spacing: 2px;
  }
  
  .tarjeta4 .back p {
    letter-spacing: 1px;
  } 
  
  .tarjeta4:hover .front {
    transform: perspective(600px) rotateY(180deg);
  }
  
  .tarjeta4:hover .back {
    transform: perspective(600px) rotateY(360deg);
  }
  /* fin tarjeta de redes */