/* ===================================
    General
====================================== */

section{
  overflow-x: clip;
  position: relative;
}

.proyecto .inf .content-icons{
  min-width: 35px;
  position: absolute;
}

.proyecto .inf .content-icons .icon{
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.proyecto .inf .content-icons .icon svg{
  width: 60%;
  height: 60%;
  stroke:#113180;
}

.proyecto .inf .content-icons .icon path{
  stroke:#113180;
}

.p-left-top{
  top:20px;
  right: 20px;
}

.p-bottom-right{
  bottom: 80px;
  right: 20px;
}

.p-top-left{
  top:170px;
  left: 20px;
}



/*Card proyectos v1*/

.card-pv1{
  width: 100%;
  height: 400px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  position: relative;
}

.card-pv1 .cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

.card-pv1 .inf{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0px;
  left: 0px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(1, 5, 14, 0) 0%, rgba(2, 25, 81, 0.5) 100%);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}




.card-pv1 .inf .description{
  width: 70%;
  height: auto;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 20px;
  background: #113180;
  color:#fff;
  padding: 20px;
  position: relative;
  top:100px;
  left: 0px;
}

.card-pv1 .inf .nombre{
  width: 100%;
  height: auto;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 20px;
  padding: 20px;
  background: #F2F2F2;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.card-pv1 .inf .nombre .icon{
  margin-right: 15px;
}

.card-pv1 .inf .nombre .icon img{
  width: 30px;
}


.card-pv1 .inf .nombre-alt{
  width: 100%;
  height: auto;
  padding: 20px;
  background: transparent;
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.card-pv1 .inf .icon-ext{
  position: absolute;
    bottom: 20px;
    right: 35px;
    align-items: end;
    display: flex;
    flex-direction: column;
    text-align: right;
}

.card-pv1 .inf .icon-ext img{
  width: 150px;
}


/*Card proyecto v2*/

.card-pv2{
  width: 100%;
  height: 400px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 50px;
  position: relative;
}

.card-pv2 .cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 50px;
}


.card-pv2 .inf{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0px;
  left: 0px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(1, 5, 14, 0) 0%, rgba(2, 25, 81, 0.5) 100%);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 50px;
}


.card-pv2 .inf .description{
  width: 100%;
  height: auto;
  border-bottom-left-radius: 50px;
  border-top-left-radius: 20px;
  background: #F2F2F2;
  padding: 20px 10px 25px 35px;
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.card-pv2 .inf .nombre{
  width: 75%;
  height: auto;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 20px;
  background: #113180;
  display: flex;
  align-items: center;
  position: absolute;
  top:25%;
  left: 0px;
}

.card-pv2 .inf .nombre .icon{
  margin-right: 15px;
}

.card-pv2 .inf .nombre .icon img{
  width: 30px;
}


/*Card proyecto v3*/

.card-pv3{
  width: 100%;
  height: 400px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 20px;
  position: relative;
}

.card-pv3 .cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 20px;
}


.card-pv3 .inf{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0px;
  left: 0px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(1, 5, 14, 0) 0%, rgba(2, 25, 81, 0.5) 100%);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 20px;
}


.card-pv3 .inf .description{
  width: 80%;
  height: auto;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background: #F2F2F2;
  padding: 20px;
  position: absolute;
  bottom: 150px;
  left: 0px;
}

.card-pv3 .inf .nombre{
  width: 100%;
  height: auto;
  padding: 20px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.card-pv3 .inf .icon-ext{
  position: absolute;
  top:20px;
  right: 20px;
}

.card-pv3 .inf .icon-ext img{
  width: 30px;
}


.card-pv3 .inf .icon-ext-alt{
  position: absolute;
  top:20px;
  left: 20px;
}

.card-pv3 .inf .icon-ext-alt img{
  width: 80px;
}


/*Card proyecto v4*/

.card-pv4{
  width: 100%;
  height: 400px;
  border-radius: 20px;
  position: relative;
}

.card-pv4 .cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}


.card-pv4 .inf{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0px;
  left: 0px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(1, 5, 14, 0) 0%, rgba(2, 25, 81, 0.5) 100%);
  border-radius: 20px;
}


.card-pv4 .inf .description{
  width: 100%;
  height: auto;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 50px;
  background: #113180;
  color: #fff;
  padding: 20px;
  position: absolute;
  top:0px;
  right: 0px;
}

.card-pv4 .inf .nombre{
  width: 100%;
  height: auto;
  padding: 20px;
  background: transparent;
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.card-pv4 .inf .icon-ext{
  position: absolute;
    bottom: 70px;
    right: 20px;
    align-items: end;
    display: flex;
    flex-direction: column;
    text-align: right;
}

.card-pv4 .inf .icon-ext img{
  width: 80px;
}

/* ===================================
    responsive
====================================== */

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {

.card-pv1 .inf .nombre{width: 80%;}
.card-pv1 .inf .description{width: 70%;top:60px;}

.card-pv2 .inf .description{width: 75%;bottom: 30px;}
.card-pv2 .inf .nombre{width: 50%;}

.card-pv3 .inf .description{width: 75%;bottom: 130px;}

.card-pv4 .inf .description{width: 80%;}
.p-top-left{top:120px;}

}
/* md  */ @media (min-width: 768px) {

.proyecto .inf .content-icons .icon{width: 55px;height: 55px;}
.proyecto .inf .content-icons{  width: 55px;}

.p-bottom-right{bottom: 100px;}
.p-top-left{top:20px;}



.card-pv1 .inf .nombre{width: 60%;}
.card-pv1 .inf .description{width: 60%;top:50px;}
.card-pv1 .inf .nombre .icon img{width: 50px;}


.card-pv2 .inf .description{width: 65%;}
.card-pv2 .inf .nombre{width: 40%;}
.card-pv2 .inf .nombre .icon img{width: 50px;}

.card-pv3 .inf .description{width: 65%;bottom: 100px;}
.card-pv3 .inf .icon-ext img{width: 50px;}
.card-pv3 .inf .icon-ext-alt img{width: 100px;}

.card-pv4 .inf .description{width: 60%;}
.card-pv4 .inf .icon-ext{bottom: 20px;}
.card-pv4 .inf .icon-ext img{width: 100px;}


} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.card-pv1{height: 500px;}
.card-pv1 .inf .nombre{width: 40%;}
.card-pv1 .inf .description{width: 40%;top:100px;}

.card-pv2{height: 500px;}
.card-pv2 .inf .description{width: 55%;}
.card-pv2 .inf .nombre{width: 55%;}

.card-pv3{height: 500px;}
.card-pv3 .inf .description{width: 65%;bottom: 100px;}

.card-pv4{height: 500px;}
.card-pv4 .inf .description{width: 50%;}


} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {

.card-pv2 .inf .nombre{width: 50%;}

}
/* xxl */ @media (min-width: 1400px) {}