/* ===================================
    Global
====================================== */

body{
  overflow-x:clip;
}

section{
   overflow: hidden;
   position: relative;
}

.content-logo-main{
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

.logo-main{
  width: 100px;
  display: inherit;
  position: relative;
  top:0px;
  left: 0px;
}

.mapa-content {
  position: relative;
  width:100%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow:hidden;
}

.imp-canvas{
  width:100%;
  height: auto;
}

.contet-inf-located{
  clip-path: polygon(20% 0, 100% 0, 100% 90%, 80% 100%, 0 100%, 1% 10%);
  position: absolute;
  top:140px;
  right: 0px;
  width: 90%;
  min-height: auto;
  padding: 50px;
  background: linear-gradient(180deg, #012F6C 0%, rgba(1, 47, 108, 0) 100%);
  transition: all 2s;

}

.flex-located{
  display: flex;
  flex-direction: column;
  gap:20px;
}
.grid-located{display: grid;grid-template-columns: 1fr;gap:20px;}

.contet-inf-located .title-located{
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.contet-inf-located .sub-located{
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 10px;
  margin-top: 30px;
}

.contet-inf-located p{
  margin-bottom: 5px;
}

.contet-inf-located .deco{
  width: 50px;
  height: 1px;
  background: #EE6723;
  margin-top: 5px;
  margin-bottom: 10px;
}



.contet-inf-located a:hover{
  color: #EE6723;
  text-decoration: underline;
  transition: all 0.7s ease;
}

.contet-portada-galery{
  width: 100%;
  height: 250px;
  position:relative;
  right: 0px;
  z-index: 10;
  margin-top: 50px;
}

.contet-portada-galery img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.title-avaible{
  margin-top: 325px;
  /*writing-mode: vertical-rl;
  transform: rotate(180deg);*/
}

/*Information pocket park*/

.content-inf-pocket{
  position: absolute;
  top:0px;
  right: -500px;
  width: 90%;
  height: 100vh;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
  background:#012F6C;
  visibility: hidden;
  transition: all 1s;
  z-index: 50;
}

#pocket.active{
  right: 0px;
  visibility: visible;
}

#pocket2.active{
  right: 0px;
  visibility: visible;
}

#pocket3.active{
  right: 0px;
  visibility: visible;
}
#pocket4.active{
  right: 0px;
  visibility: visible;
}
#pocket5.active{
  right: 0px;
  visibility: visible;
}

#pocket6.active{
  right: 0px;
  visibility: visible;
}

#pocket7.active{
  right: 0px;
  visibility: visible;
}

.content-inf-pocket .title-pocket{
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}


.content-inf-pocket .deco{
  width: 50px;
  height: 1px;
  background: #EE6723;
  margin-top: 5px;
  margin-bottom: 15px;
}

.content-inf-pocket .btn-close-pocket{
  position:absolute;
  top:10px;
  right: 10px;
  cursor:pointer;
  transition: all 0.7s ease;
  z-index: 100;
}



.content-inf-pocket .btn-close-pocket i{
  color: #fff;
  font-size: 24px;
}

.content-inf-pocket .btn-close-pocket:hover i{
  color: #EE6723;
  transition: all 0.7s ease;
}



.hidden {
  overflow: hidden;
  display: none;
  visibility: hidden;
}

/* ===================================
    Responsive
====================================== */

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

.mapa-content {height: 580px;display: flex;justify-content: center;align-items: flex-end;}
.contet-inf-located{top:140px;width: 90%;flex-direction: row;}
.flex-located{flex-direction: row;}
.grid-located{grid-template-columns: 1fr 1fr;}

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

.mapa-content {height: 600px;display: flex;justify-content: center;align-items: flex-end;}
.contet-inf-located{top:140px;width: 85%;}
.content-inf-pocket{width: 400px;}
.flex-located{flex-direction: row;}
.grid-located{grid-template-columns: 1fr 1fr;}

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

.mapa-content {height: 80vh;display: flex;justify-content: center;align-items: flex-end;}
.logo-main{width: 130px;display: inherit;position: absolute;}
.contet-inf-located{top:50px;width: 600px;right: 50px;}
.content-inf-pocket{padding-top: 50px;padding-bottom: 50px;padding-left: 30px;padding-right: 30px;}
.flex-located{flex-direction: row;}
.grid-located{grid-template-columns: 1fr 1fr;}

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

.mapa-content {height: 100vh;display: flex;justify-content: center;align-items: flex-end;}
.logo-main{display: inherit;}
.contet-inf-located{top:50px;right: 50px;}

.contet-portada-galery{width: 450px;position:absolute;}
.content-inf-pocket{padding-top: 50px;padding-bottom: 50px;padding-left: 50px;padding-right: 50px;}
.flex-located{flex-direction: row;}
.grid-located{grid-template-columns: 1fr 1fr;}

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

.mapa-content {height: 100vh;display: flex;justify-content: center;align-items: center;}

.contet-inf-located{
  clip-path: polygon(25% 0, 100% 0, 100% 85%, 75% 100%, 0 100%, 1% 15%);
  top:50px;
  right: 50px;
  width: 330px;
  min-height: auto;
  padding: 50px 20px 20px 60px;
  flex-direction: column;
  background: #012F6C;
}

.flex-located{flex-direction: column;}
.grid-located{grid-template-columns: 1fr;}

.logo-main{display: none;}

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