.container-project{
    width: 33%;
    margin:15px 0px;
    padding:5px;
}
.projects h2{

    text-align: center;
    font-size: 28px;
    font-weight: bold;
}
.projects p,.projects li{
  font-size: 12px;
}
.container-project h3{
    font-size: 1.7rem;
    font-weight: bold;
    color: var(--principal)!important;
    text-align: center;
    height: 35px;
}
.projects{
   
}
.container-project p{
    padding-top: 1.4rem;
    height: 260px;
    text-align: center;
    padding:5px;
}
.container-project a{
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    background-color: #64B1D8;
    border-radius: 31px 31px 31px 31px;
    color: #ffffff;
}
.map[usemap] {
    border: 0;
    height: auto;
    max-width: 95%;
    width: 500px;
  
}
.maps.animation-map img{
    max-width: 95%;
    width: 500px;
    
}
.maps.no-animation img{
 
    width: 100%; 
}
.maps rect{
    background-color: red;
}
.maps.animation-map .pictarea{
    animation: none 5s infinite;
    
}

/*    transform: rotate(-6deg) */
/*animation: animation_arrow 5s infinite;*/
@keyframes animation_arrowv2 {
    0%    { transform: scale(0deg); }
    4%  { transform: scale(-2deg); }
    8%  { transform: scale(-4deg); }
    12%  { transform: scale(-6deg); }
    16%  { transform: scale(-8deg); }
    20%  { transform: scale(-10deg); }
    24%   { transform: rotate(-12deg) }
    28%  { transform: scale(-10deg); }
    32%  { transform: scale(-8deg); }
    36%  { transform: scale(-6deg); }

    40%  { transform: scale(-4deg); }
    44%  { transform: scale(-2deg); }
    48%  { transform: scale(0deg); }
    52%  { transform: scale(2deg); }
    56%  { transform: scale(4deg); }
    60%  { transform: scale(6deg); }
    64%  { transform: scale(8deg); }
    68%  { transform: scale(10deg); }
    72%   { transform: rotate(12deg) }
    76%  { transform: scale(10deg); }

    80%  { transform: scale(8deg); }
    84%  { transform: scale(6deg); }
    88%  { transform: scale(4deg); }
    92%  { transform: scale(2deg); }
    96%    { transform: scale(0deg); }
    100%    { transform: scale(0deg); }
  }
  @keyframes animation_arrow {
    0%    { transform: scale(0deg); }
    4%  { transform: scale(-1deg); }
    8%  { transform: scale(-2deg); }
    12%  { transform: scale(-3deg); }
    16%  { transform: scale(-4deg); }
    20%  { transform: scale(-5deg); }
    24%   { transform: rotate(-5deg) }
    28%  { transform: scale(-5deg); }
    32%  { transform: scale(-4deg); }
    36%  { transform: scale(-3deg); }

    40%  { transform: scale(-2deg); }
    44%  { transform: scale(-1deg); }
    48%  { transform: scale(0deg); }
    52%  { transform: scale(1deg); }
    56%  { transform: scale(2deg); }
    60%  { transform: scale(3deg); }
    64%  { transform: scale(4deg); }
    68%  { transform: scale(5deg); }
    72%   { transform: rotate(5deg) }
    76%  { transform: scale(5deg); }

    80%  { transform: scale(4deg); }
    84%  { transform: scale(3deg); }
    88%  { transform: scale(2deg); }
    92%  { transform: scale(1deg); }
    96%    { transform: scale(0deg); }
    100%    { transform: scale(0deg); }
  }


  .modal-project{
    width:100%;
    max-width: 300px;
    height: 220px;
    border-radius: 5px;
    border:1px solid #000;
    display: flex;
  }
  .section_data{
    width:50%;
    height: 220px;
  }
  .section_data h2{
    font-size:16px;
    font-weight: bold;
    padding:10px;
    word-break: break-all;
  }
  .section_data p{
    font-size: 14px;
    padding:10px;
    word-break: break-all;
  }
  .section_button{
    width:50%;
    height: 219px;
    background-color: #cbc8c8;
    padding:15px;
    border-bottom:1px solid #000;
    border-bottom-right-radius: 5px;
  }
@media only screen and (max-width: 850px) {
    .container-project{
        width: 100%;
      
    }
}