#myModal{
    background-color: rgba(0, 0, 0, 0.315);
border-bottom: 20px; 
  }

.modal-body{
  border-color: rgb(255, 0, 128);
   height: 350px;
   font-size: 29px; 
   font-family: 'Arial Black';
   background: url("../img/danli.png")
}

  
  .modal-header h4 {
          font-size: 30px;
      font-weight: bold;
      font-family: 'Arial Black';

  }

  .modalcontent {
      font-size: 15px;
      
  }

  .modalcontent {
      background-color: rgba(167, 194, 251, 0.705);
      margin-top: 102px;
      text-align: center;
      font-weight: bold;
      color: rgb(0, 0, 0);
      border-radius: 20px;
      font-weight: bold;
  }

  .modal-header {
      border-top-right-radius: 20px;
      border-top-left-radius: 20px;
      text-align: center;
      font-weight: bold;
      color: rgb(0, 0, 0);
      background: url("../img/modal4.jpg")repeat-y

      
  }

  .mod {
    position: absolute;   
      width: 110px;
      height: 180px;
      text-align: center;
      size: 270px;
      border: rgb(0, 174, 255) 5px solid;
      border-radius: 20px;
      font-weight: bold;
      background-color: rgba(255, 255, 255, 0.705);
      margin-left:  10px;
      margin-top: 30px;
  }

  .mod2 {
    position: absolute;   
    width: 110px;
    height: 180px;
    text-align: center;
    size: 270px;
    border: rgb(0, 174, 255) 5px solid;
    border-radius: 20px;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.705);
    margin-left: 153px;
    margin-top: 30px;
  }
  
  .mod3 {
    position: absolute;   
      width: 110px;
      height: 180px;
      text-align: center;
      size: 270px;
      border: rgb(0, 174, 255) 5px solid;
      border-radius: 20px;
      font-weight: bold;
      background-color: rgba(255, 255, 255, 0.705);
      margin-left: 298px;
      margin-top: 30px;
  }
  .mod4 {
    
    position: absolute;   
      width: 110px;
      height: 180px;
      text-align: center;
      size: 270px;
      border: rgb(0, 174, 255) 5px solid;
      border-radius: 20px;
      font-weight: bold;
      background-color: rgba(255, 255, 255, 0.705);
      margin-left: 445px;
      margin-top: 30px;
  }


  
  .num2 {
      color: rgb(0, 0, 0);
      font-weight: bold;
      font-size: 20px;
      margin-top: 12px;
  }

  .modal-footer img {
      size: 50px;
  }


  .preloader {
    width: 70px;
    height: 70px;
    border: 10px solid rgb(21, 255, 0);
    border-top: 10px solid rgba(5, 112, 145, 0.719);
    border-radius: 50%;
    animation-name: girar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    margin-left: 14px;
  }
  @keyframes girar {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .preloader2 {
    width: 70px;
    height: 70px;
    border: 10px solid rgb(212, 40, 40);
    border-top: 10px solid rgb(0, 140, 255);
    border-radius: 50%;
    animation-name: girar;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    margin-left: 14px;
  }
  @keyframes girar {
    from {
      transform: rotate(-10deg);
    }
    to {
      transform: rotate(20deg);
    }
  }

  .preloader3 {
    width: 70px;
    height: 70px;
    border: 10px solid rgb(218, 179, 7);
    border-top: 10px solid rgb(3, 175, 32);
    border-radius: 50%;
    animation-name: girar;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    margin-left: 14px;
  }
  .img{
    width: 70px;
    height: 70px;
  }
  .img:hover {-webkit-transform:scale(1.5);transform:scale(1.3);}
.contenedor {overflow:hidden;}
  @keyframes girar {
    from {
      transform: rotate(6deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .preloader4 {
    width: 70px;
    height: 70px;
    border: 10px solid rgb(10, 156, 192);
    border-top: 10px solid rgb(145, 11, 100);
    border-radius: 50%;
    animation-name: girar;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    margin-left: 14px;
  }
  @keyframes girar {
    from {
      transform: rotate(4deg);
    }
    to {
      transform: rotate(360deg);
    }
  }