.projects-div{
  margin-bottom: 20px;
}

.projects-div .col-agp{
  padding: 8px;
}

.projects-div a:not(.btn){
  color: #ffffff!important;
}
.projects-div a:hover{
  text-decoration: none;
}

.div-more-projects{
  margin-top: 30px;
  padding: 20px;
  text-align: center;
}

/*//// CARD PROJECT ////*/
.card-project{
  /*background-color: red;*/
  color:white;
  text-align: left;
  position: relative;
  box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);

  border-radius: 10px;
  overflow: hidden;
  
  height: 250px;

  transition: 0.4s;
}

.wip .card-project{
  background-color: #454545;
}

.card-project:hover{
  transform: scale(1.05);
  z-index: 888;

  animation-name: card-descrip-scale;
  animation-duration: 0.4s;
}

/*.card-project:hover:before{
  content: '';
  position: absolute;
  top:0;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0);
  background-image: url("../../assets/images/test/logo_card_agp.png");
  background-size: 100%;
  background-repeat: no-repeat;
  opacity: 0.9;
}*/

.card-project .card-project-img
{
  text-align: center;
}

.card-project .card-project-img img{
  /*width: 250px;
  height: 206px;*/
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.card-project:hover .card-project-img img, .card-project:hover .card-project-img .img-text{
  /*width: 250px;
  height: 206px;*/
  width: 100%;
  height: 250px;
  object-fit: cover;
  
  filter: brightness(40%) blur(3px);
  animation-name: card-descrip-blur;
  animation-duration: 0.4s;
}

.card-project .card-project-title{
  width: 250px;
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
  padding: 10px 0px;
  background: #015273;
}

.card-project-descrip{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  padding: 20px;
  font-size: 10pt;
  /*font-weight: bold;*/
  line-height: 20px;
  display: none;
  pointer-events: none;

  transition: 0.4s;
}

.card-project:hover .card-project-descrip{
  display: block;
  animation-name: card-descrip-fadein;
}

.card-project-descrip .cp-desc-title{
  font-size: 12pt;
}

.card-project:hover .card-project-descrip .hr-agp{
  margin: 8px 0px;

  animation-name: card-descrip-hr;
  animation-duration: 0.5s;

  visibility: visible;
}

.card-project:hover .card-project-descrip .cp-desc-description div{
  animation-name: card-descrip-down;
  animation-duration: 1.2s;

  margin-bottom: 1rem;
  
}

.card-project:hover .card-project-descrip .cp-desc-button{
  animation-name: card-descrip-fadein2;
  animation-duration: 1.2s;
  pointer-events: all;
}

.card-project-descrip .cp-desc-description{
  font-size: 8pt;
  line-height: 15px;
  overflow: hidden;
}

.card-project-descrip .cp-desc-description p:last-child{
  margin-bottom: 0;
}
.card-project-descrip .cp-desc-description p{
  margin-bottom: 10px;
}

.card-project-wip-icon{
  position: absolute;
  line-height: 250px;
  font-size: 100pt;
  text-align: center;
  width: 100%;
  z-index: 0;
  color: #505050;
}
.card-project-wip-title{
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 250px;
  font-size: 20pt;
  font-weight: bold;
  color: #9f9f9f;
  text-decoration: none;
  position: relative;
  z-index: 2;
}
.wip-title{
  font-size: 14pt;
  padding-left: 5px;
  margin-top: 20px;
}
.wip-desc{
  font-size: 11pt;
  padding-left: 5px;
  overflow: hidden;
}

.card-project-not-announced{
  font-size: 30pt;
  background-color: #121212;
  line-height: 38px;
  position: absolute;
  padding-top: 25%;
  height: 100%;
}

/*/////////////////////////*/

.hr-agp{
  display: block;
  width: 100%;
  height: 1px;
  margin: 15px 0;
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(253,191,14,0) 100%);
}


.wip .hr-agp{
  visibility: hidden;
}

.wip .wip-desc p{
  visibility: hidden;
}

.wip .wip-button{
  visibility: hidden;
}

.wip-button{
  /*text-align: center;*/
}


.wip:hover .card-project{
  transform: scale(1.05);
  z-index: 888;

  animation-name: card-descrip-scale;
  animation-duration: 0.4s;
}

.wip:hover .hr-agp{
  animation-name: card-descrip-hr;
  animation-duration: 0.5s;

  visibility: visible;
}

.wip:hover .wip-desc p{
  animation-name: card-descrip-down;
  animation-duration: 1.2s;

  visibility: visible;
}

.wip:hover .wip-button{
  animation-name: card-descrip-fadein2;
  animation-duration: 1.2s;
  visibility: visible;
}

/* MEDIA QUERIES */

@media (max-width: 992px){
  .card-project {
    height: 190px;
  }

  .card-project .card-project-img img {
    height: 190px;
  }

  .projects-div .col-agp{
    padding: 25px;
  }

  .wip-title{
    margin-top: 10px;
    font-size: 12pt;
  }
  .wip-desc{
    font-size: 8pt;
  }

  .hr-agp{
    margin: 8px 0;
  }

  .card-project-wip-icon,.card-project-wip-title {
    line-height: 190px;
  }

  .card-project:hover {
    transform: inherit;

    animation-name: none;
    animation-duration: unset;
  }

  .card-project:active {
    transform: scale(1.05);

    animation-name: card-descrip-scale;
    animation-duration: 0.4s;
  }

  .card-project:hover .card-project-img img{
    filter: inherit;
    animation-name: none;
    animation-duration: unset;
    height: 190px;
  }

  
  .card-project:hover .card-project-descrip{
    display: none;
    animation-name: none;
  }

  .card-project:hover .card-project-descrip .hr-agp{
    animation-name: none;
    animation-duration: unset;
  }

  .card-project:hover .card-project-descrip .cp-desc-description p{
    animation-name: none;
    animation-duration: unset;
  }

  .card-project:hover .card-project-descrip .cp-desc-button{
    animation-name: none;
    animation-duration: unset;
  }

  .wip .hr-agp{
    visibility: visible;
  }

  .wip .wip-desc p{
    visibility: visible;
  }

  .wip .wip-button{
    visibility: visible;
  }

  
  .wip:hover .card-project{
    transform: inherit;

    animation-name: none;
    animation-duration: unset;
  }
  
  .wip:active .card-project {
    transform: scale(1.05);

    animation-name: card-descrip-scale;
    animation-duration: 0.4s;
  }

  .wip:hover .hr-agp{
    animation-name: none;
    animation-duration: unset;
  }

  .wip:hover .wip-desc p{
    animation-name: none;
    animation-duration: unset;
  }

  .wip:hover .wip-button{
    animation-name: none;
    animation-duration: unset;
  }

  .div-more-projects {
    padding: 40px 0px;
  }
}

/*///////////////////////////////*/

/* ANIMATIONS */

@keyframes card-descrip-fadein {
  from { opacity: 0; }
  to { opacity: 1;}
}

@keyframes card-descrip-fadein2 {
  0%   {opacity: 0;}
  50%  {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes card-descrip-scale {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

@keyframes card-descrip-blur {
  from { filter: brightness(100%) blur(0px); }
  to { filter: brightness(40%) blur(3px); }
}

@keyframes card-descrip-hr {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0 0 0 0%); }
}

@keyframes card-descrip-down {
  from {  transform: translateY(-200%); }
  to { transform: translateY(0%); }
}

/*/////////////////////////*/