/**Mosaico Experiencias Home**/
.item-image {
  height: 600px;
  width: 32%;
  overflow: hidden;
  position: relative;
}
.item-image .overlay{
    position:relative;
    padding:0;
    background:rgba(0,0,0,.6);
}
.item-image:first-child {
  margin-top: 400px;
  margin-right: 2%;
}
.item-image:nth-child(2) {
  margin-top: 30px;
  margin-right: 2%;
}
.item-image:nth-child(3) {
  margin-top: 30px;
  margin-right: 2%;
}
.item-image:nth-child(4) {
  margin-top: 30px;
  margin-right: 2%;
}
.item-image:nth-child(5) {
  margin-top: 300px;
}
.item-image:nth-child(6) {
  margin-top: 30px;
}
.item-image img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  display: block;
  transition: 0.9s all;
}
/*.itemAnimTop {
  animation: fadeintop 1s;
}

.itemAnimLeft {
  animation: fadeinleft 2s;
}
.itemAnimRight {
  animation: fadeinright 3s;
}

.itemAnimBottom {
  animation: fadeinbottom 4s;
}

.itemAnimBottom5 {
  animation: fadeinbottom 4.5s;
}*/
.item-image:hover img {
  transform: scale(1.1);
  filter: brightness(0.9);
}
.container-grid {
  position: relative;
}
.title-box {
  left: auto;
  position: absolute;
  top: 170px;
  width: 32%;
  padding: 0 30px;
  z-index: 0;
  text-align: center;
}
.inner-items {
  position: relative;
  flex-wrap: wrap !important;
  /*height: 1650px;*/
  display: flex;
  /*flex-direction: column !important;
  align-items: center !important;*/
}
.title-expe {
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
  top: 50%;
  padding-bottom:30px;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  transition:2s all;
}
.title-expe .btn-corpo.light{
    text-align:center;
}
.title-expe .btn-corpo.light::before,
.title-expe .btn-corpo.light::after{
    content:none;
}
.title-expe h3 a {
  color: white;
}
.title-expe h3 {
  font-family: var(--font-titles);
  color: white !important;
  font-style: normal;
  text-align: center;
  font-size: 3rem;
  font-weight: 400;
  text-shadow: 0 0 8px rgb(0 44 71/40%);
}
.item-image:hover {
  box-shadow: 1px 5px 20px rgb(0 0 0 / 20%);
}
.item-image .content-wrapper-hover {
  position: relative;
  height: 100%;
  z-index: 2;
  display:none;
  padding: 0 15px;
}
.item-image .content-wrapper-hover .content-text-hover {
  margin: 0;
  width: calc(100% - 30px);
  position: absolute;
  bottom: 10%;
  /*overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;*/
}
.item-image .content-wrapper-hover .content-text-hover p {
  font-family: var(--font-titles);
  font-size: 19px;
  font-weight: 400;
  color: white;
  letter-spacing: 0.02em;
  line-height: 1em;
  width: auto;
  margin-bottom: 0;
  padding: 0 15px;
  padding-top: 20px;
}
.item-image::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background-color: rgb(46 77 75 / 52%);
  transition: all 0.5s ease;
  z-index: 1;
  /*backdrop-filter: blur(3px);*/
}
.item-image.exp-open .title-expe{
    top:0;
    justify-content:flex-start;
    padding-bottom:0;
    padding-top:30px;
}
.content-text-hover p a {
  color: white !important;
  font-size: 15px;
  transition: 0.5s all;
  font-weight: 300;
  width:100%;
  display:block;
  padding-left:12px;
  position:relative;
}
.content-text-hover p a:before {
  top: 50%;
  right: 13px;
  transform: translatey(-50%);
  content: "\f04b";
  margin-right: 8px;
  font-size: 8px;
  color: white;
  font-family: "Fontawesome";
  position:absolute;
  width:min-content;
  left:0;
}
/*.content-text-hover p a:after {
  content: "";
  border-bottom: 1px solid rgb(255 255 255 / 20%);
  display: block;
  margin-top: 7px;
  width: 100%;
}*/
.content-text-hover p a:hover {
  margin-left: 15px;
}
.content-text-hover p {
  padding: 8px !important;
}
/*.item-image:hover .title-expe {
  top: 20% !important;
  z-index: 3;
}*/
.title-expe {
  transition: top 0.3s ease-in !important;
}
/*.item-image:hover .content-wrapper-hover {
  opacity: 1;
}*/
.item-image .content-wrapper-hover.opacity{
    display:block;
}
/*.item-image:hover::after {
  opacity: 0.9;
}*/

/*NEW EXPERIENCES*/
.new-experiences .title-box {
  left: auto;
  position:relative;
  top: 0;
  padding: 0 30px;
  z-index: 0;
  text-align: center;
}
.new-experiences .inner-items {
  position: relative;
  flex-wrap: wrap !important;
  display: flex;
  flex-wrap:wrap;
  gap:20px;
}
.new-experiences .item-image {
  height: 70vh;
  width: calc(33.33% - 40px);
  overflow: hidden;
  position: relative;
}
.new-experiences .item-image .overlay{
    position:relative;
    padding:0;
    background:rgba(0,0,0,.6);
}
.new-experiences .item-image:first-child {
  margin-top: 0;
  margin-right: 0;
}
.new-experiences .item-image:nth-child(2) {
  margin-top: 0;
  margin-right: 0;
}
.new-experiences .item-image:nth-child(3) {
  margin-top: 0;
  margin-right: 0;
}
.new-experiences .item-image:nth-child(4) {
  margin-top: 0;
  margin-right: 0;
}
.new-experiences .item-image:nth-child(5) {
  margin-top: 0;
}
.new-experiences .item-image:nth-child(6) {
  margin-top: 0;
}
@media(max-width:1024px){
    .new-experiences .inner-items {
        position: relative;
        flex-wrap: nowrap !important;
    }
    .new-experiences .item-image{
         height: 50vh !important;   
    }
    .item-image{
        margin-top:0 !important;
    }
    .title-box{
        top:-100px;
        width:100%;
    }
    .title-box h2{
        text-align:left !important;
    }
    .container-grid:has(.title-box){
        margin-top:80px;
        padding-top: 100px;
        margin-bottom: 0;
    }
    .item-image .content-wrapper-hover,.title-expe .btn-corpo.light{
        display:none !important;
    }
    .item-image .title-expe{
        top:50% !important;
        transform: translate(0, -50%);
        height:auto;
    }
    .item-image:first-child, .item-image:nth-child(2), .item-image:nth-child(3), .item-image:nth-child(4), .item-image:nth-child(5), .item-image:nth-child(6) {
        margin-top: 0;
        animation: none;
        margin-left: 0 !important;
        width: 100% !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .inner-items {
        height: 60vh !important;
    }
}