body {
    margin: 0;
    padding: 0;
    position: ;
}
.content-header{
    padding: 0;
    padding-bottom: 10px;
}
#reservas{
    padding-top: 0;
    padding-bottom: 0;
}
.mastheads .container{
    padding-top: 10px;
}
.canchas{
    max-height: 120px;
    padding-top: 0;
    max-width: 190px;
}
.canchas img{
    height: 70px;
    width: 200px;
}

@media(max-width:560px){
    
    .mastheads{
        margin-bottom: 20px;
        border-radius-left: 20px;
    }
  .canchas,.sucursal{
    max-height: 120px;
    padding-top: 0;
    
  }
  .canchas{
    max-width: 190px;
  }
  .sucursal .card-body{
    padding-top: 0;
/*    background-color: blue;*/
    margin: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-left: 2px solid lightblue;
  }
.content-header{
    padding-left: 10px;
    padding-right: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
   /* margin-left: 5px;
    margin-right: 5px;*/
}
 a.specialty,a.predios{
    font-size: 10px;
}
#predios,.page-title .text-whites{
    font-size: 16px;
    color: black;
}

}

.footer-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    display: flex;
    justify-content: space-around;
    padding: 0px;
}

.icon-container {
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
/*    background-color: #373739;*/
    padding:5px 8px;
}
.fila-seleccionable:hover{
    cursor: pointer;
}
#portfolio .container-fluid, #map{
    background-image: url("../img/bg.png");
    background-size: cover;
    background-position: center;

}
/* Mostrar el footer solo en pantallas con un ancho máximo de 400px */
@media (max-width: 995px) {
    .footer-fixed {
        display: flex;
        background-image: url("../img/bg.png");
        z-index: 100;
        background-size: cover;
        background-position: center;
    }
    #pie{
        display: none;
    }
    img{
        width: 80px;
        height: 50px;

/*        background-color: white;*/
    }
    footer .container {
        display: none;
    }

}
@media (max-width:560px){
    /*se modifica el 31-12-23*/
    .article{
    background-image: url("../img/bg.png");
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:-1;
        background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 0;
    margin-bottom: 0;
    padding-top: 30px;
    
}
}

/* Ocultar el footer en pantallas más grandes que 400px */
@media (min-width: 951px) {
    .footer-fixed {
        display: none;
    }
    #pie{
        display: flex;
    }
    #anuncio{
        padding-top: 50px;
        padding-bottom: 30px;
    }
}
/*diseño del fondo con imagen y vista de logo del nav*/
.article{
    background-image: url("../img/bg.png");
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:-1;
        background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 0;
    padding-top: 60px;
    position: ;
}
.section, .mastheads {
       background-image: url("../img/bg.png");
        top:0;
        left:0;
        width:100%;
        height:30%;
        z-index:-1;
        background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 0;
    }
    .predio{
        position: fixed;top:70px ;left: 0; width: 100%; padding: 10px;
    }
   
        #logo{
        display: none;
        }
        .tit{
            display: none;
        }
    @media (max-width: 994px) {
    .predio {
        display: none;
    }
    #logo{
        display: block;
        margin-left: 12px;
    }
    .tit{
        display: block;
    }
    p{
        font-size: 12px;
    }
}
/*diseño del card de las canchas y predios*/
.card-header{
    background-color: transparent;
    margin-bottom: 10px;
    margin-left: 0;
}
.col-8{
    border-radius: 15px;
    border-left: 2px solid lightblue;
    margin-left: 0px;
    padding-left: 10px;
    margin-right: 0px;
}
.col-4{
    margin-right: 0px;
    padding-right: 15px;
}
.col-4 img{
    max-width: 70px;

}
img{
/*    max-width: 100px;*/
}
.image img{
    width: 100%;
    
}
@media (max-width: 420px) {
    #box img{
        max-height: 100px;
    }
  .no-gutters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
  }
  
  #box {
    flex-basis: 100%;
    max-width: 30%;
    background-color: ;
    padding: 0px; 
    box-sizing: border-box;
    padding-bottom: 0px;
  }
  
  #box a {
    z-index: 1;
    display: block; 

  }
  .box{
    width: 200px;
  }
  .project-name, .project-category{
    font-size: 12px;
  }
}
#portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption, 
#portfolio .container-sm .portfolio-box:hover .portfolio-box-caption, 
#portfolio .container-md .portfolio-box:hover .portfolio-box-caption, 
#portfolio .container-lg .portfolio-box:hover .portfolio-box-caption, 
#portfolio .container-xl .portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}
.project-name{
    padding: 10px;
    display: inline-flex;
    position: relative;
    color: ;
    background-color: ;
    font-weight: bold;
    border-radius: 10px;
/*  box-shadow: 0 18px 16px 0 rgba(0,0,0,0.2); */
  border-right: 2px solid black;
   border-left: 2px solid black;

  }

.project-name:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.carousel,.carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}
.carousel{display:none;width:100%;z-index:1}
.carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}
.carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}
.carousel .owl-item,.carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}
.carousel .owl-dots.disabled,.carousel .owl-nav.disabled{display:none}
.no-js .carousel,.carousel.owl-loaded{display:block}
.carousel .owl-dot,.carousel .owl-nav .owl-next,.carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.carousel .owl-nav button.owl-next,.carousel .owl-nav button.owl-prev,.carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}
.carousel.owl-loading{opacity:0;display:block}
.carousel.owl-hidden{opacity:0}
.carousel.owl-refresh .owl-item{visibility:hidden}
.carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.carousel.owl-grab{cursor:move;cursor:grab}
.carousel.owl-rtl{direction:rtl}
.carousel.owl-rtl .owl-item{float:right}
.carousel .animated{animation-duration:1s;animation-fill-mode:both}
.carousel .owl-animated-in{z-index:0}
.carousel .owl-animated-out{z-index:1}
.carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
.owl-height{transition:height .5s ease-in-out}
.carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}
.carousel .owl-item .owl-lazy:not([src]),.carousel .owl-item .owl-lazy[src^=""]{max-height:0}
.carousel .owl-item img.owl-lazy{transform-style:preserve-3d}
.carousel .owl-video-wrapper{position:relative;height:100%;background:#000}
.carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}
.carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}
.carousel .owl-video-playing .owl-video-play-icon,.carousel .owl-video-playing .owl-video-tn{display:none}
.carousel .owl-video-tn{
    opacity:0;height:100%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    transition:opacity .4s ease
}
.carousel .owl-video-frame{
    position:relative;
        z-index:1;
        height:100%;
    width:100%
}

/*estilos para el mapa*/

:root {
  --building-color: #FF9800;
  --house-color: #0288D1;
  --shop-color: #7B1FA2;
  --warehouse-color: #558B2F;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
  width: 100%;
}

/*
 * Property styles in unhighlighted state.
 */
.location {
  align-items: center;
  background-color: #FFFFFF;
  border-radius: 50%;
  color: #263238;
  display: flex;
  font-size: 14px;
  gap: 15px;
  height: 30px;
  justify-content: center;
  padding: 4px;
  position: relative;
  position: relative;
  transition: all 0.3s ease-out;
  width: 30px;
}

.location::after {
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #FFFFFF;
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  top: 95%;
  transform: translate(-50%, 0);
  transition: all 0.3s ease-out;
  width: 0;
  z-index: 1;
}

.location .icon {
  align-items: center;
  display: flex;
  justify-content: center;
  color: #FFFFFF;
}

.location .icon svg {
  height: 20px;
  width: auto;
}

.location .details {
  display: none;
  flex-direction: column;
  flex: 1;
}

.location .address {
  color: #9E9E9E;
  font-size: 10px;
  margin-bottom: 10px;
  margin-top: 5px;
}

.location .features {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.location .features > div {
  align-items: center;
  background: #F5F5F5;
  border-radius: 5px;
  border: 1px solid #ccc;
  display: flex;
  font-size: 10px;
  gap: 5px;
  padding: 5px;
}

/*
 * Property styles in highlighted state.
 */
.location.highlight {
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
  height: 80px;
  padding: 8px 15px;
  width: auto;
}

.location.highlight::after {
  border-top: 9px solid #FFFFFF;
}

.location.highlight .details {
  display: flex;
}

.location.highlight .icon svg {
  width: 50px;
  height: 50px;
}

.location .bed {
  color: #FFA000;
}

.location .bath {
  color: #03A9F4;
}

.location .size {
  color: #388E3C;
}

/*
 * House icon colors.
 */
.location.highlight:has(.fa-house) .icon {
  color: var(--house-color);
}

.location:not(.highlight):has(.fa-house) {
  background-color: var(--house-color);
}

.location:not(.highlight):has(.fa-house)::after {
  border-top: 9px solid var(--house-color);
}

/*
 * Building icon colors.
 */
.location.highlight:has(.fa-building) .icon {
  color: var(--building-color);
}

.location:not(.highlight):has(.fa-building) {
  background-color: var(--building-color);
}

.location:not(.highlight):has(.fa-building)::after {
  border-top: 9px solid var(--building-color);
}

/*
 * Warehouse icon colors.
 */
.location.highlight:has(.fa-warehouse) .icon {
  color: var(--warehouse-color);
}

.location:not(.highlight):has(.fa-warehouse) {
  background-color: var(--warehouse-color);
}

.location:not(.highlight):has(.fa-warehouse)::after {
  border-top: 9px solid var(--warehouse-color);
}

/*
 * Shop icon colors.
 */
.location.highlight:has(.fa-shop) .icon {
  color: var(--shop-color);
}

.location:not(.highlight):has(.fa-shop) {
  background-color: var(--shop-color);
}

.location:not(.highlight):has(.fa-shop)::after {
  border-top: 9px solid var(--shop-color);
}