.card-border:hover{
    transform: scale(1.05);
   
}
#Nosotros{
    background: rgb(255,255,255);
    background-color: white ;
    background-repeat:repeat-x;
    background-size: 75%;
    margin-top: -20px;
}



#Residencias{
    background-color:#4E5A3E ;
    background-repeat: no-repeat, repeat;
    background-position: bottom center, center center;
    background-size: 100%, auto;
}

.amiibo:hover{
    transform: scale(1.05);
}


#Amenidades{
    background-color: #ffffff;
}

#Ubicación{
    background-color:#C8CAC3 ;
}




p{
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
}



b{
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
}

input[type=text]{
    border: none;
    border: 0;
    border-bottom: 1px solid white;
}


#birthday{
    background-color: white;
    position: relative;
    margin-top: -767px;
    z-index: 10;
    
    text-align: justify !important;
}

#ribbon::after{
    content: '';
    background-color: transparent;
    display: block;
    height: 20px;
    width: 50%;
    margin: 0 auto;
    position: relative;
    left: auto;
    margin-top: -40px;
}

.focus{
    background-color: white;
}


#form-control{
    background-size: 100vw 100vh;
    background-attachment: fixed;
}

@media (max-width:480px) {
    form{
        width: 100%
    }
}

 /*Botones whatsapp y telefono*/
 .social {
    position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
    right: 0; /* Establecemos la barra en la direccion */
    top: 400px; /* Bajamos la barra 300px de arriba a abajo */
    z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
    border-radius: 10px 0px 0px 10px;
    text-align: right;
  
  }
   
    .social ul {
      list-style: none;
      text-align: right;
      padding:10px 4px 14px 4px;
      margin:0;
      align-items: center;
  
    }
   
    .social ul li a {
      display: inline-block;
      color:#fff;
      padding: 10px 15px;
      text-decoration: none;
      -webkit-transition:all 500ms ease;
      -o-transition:all 500ms ease;
      transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
      border-radius: 10px;
    }
    .social ul li .icon-background-ws {background:#1FC045 !important;} /* Establecemos los colores de cada red social, aprovechando su class */
    .social ul li .icon-background-ws:hover {background:#16e046 !important;} 
    .social ul li .icon-background-phone {background:#4a4a4a !important;}
    .social ul li .icon-background-phone:hover {background:#7b7a7a !important;}
  
   
  .social ul li a:hover {
      background:gray ; /* Cambiamos el fondo cuando el usuario pase el mouse */
  /*padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
  }
  
  #btncelulares{
      display: none;
  }
  
  @media (max-width: 720px){
    #btncelulares{
      display: block;
      position: fixed;
        bottom: 0;
        z-index: 100;
        width: 100%;
        padding: 5px;
    }
  
    .social{
        display:none;
    }
  }

.croquis{
    margin-bottom: 4em;
}

.mapa{
    margin-top: 7em;
}

.contact{
    background-color: #B4E6F6;
    
    text-align: center;
}

.nav-footer{
   font-size: 25px;
   padding-top: 20px; 
   color: white;
   align-items: center;
}


.card-text{
   color: #98A08F;
}



.boton .active{
    background-image: url(img/humanus_icon_service1.png);
    color: white !important;
}

.boton2 .active{
    background-image: url(img/humanus_icon_service2.png);
    color: white !important;
}

.boton3 .active{
    background-image: url(img/humanus_icon_service3.png);
    color: white !important;
}



/** displa tamaño personalizado */
.display-7{
    font-size: 2rem;
}
.display-8{
    font-size: 1.5rem;
}


.img-header{
    height: auto;
    width: 250px;
}
.texto-header{
    font-size: 1.2rem;
}
@media only screen and (max-width: 550px) {
    body {
      
      width: 100%;
      height: auto;
    }
  }

  @media(min-width: 768px){
    .img-header{
        height: auto;width:100%;
    }
  }
.text-justify{
    text-align: justify;
}

@media(min-width: 1120px){
    .texto-header{
        font-size: 1.5rem;
    }
}

@media(max-width: 550px){
    .img-header{
        height: auto;width:50% !important;
    }
}


  

@media(max-width: 550px){
    .croquis{
        margin-top: 7em;
    }
}

.nav-link{
    color: #9DA795;
}

@media(min-width: 1120px){
    .espacio{
        margin-left: 10px;
        margin-right: 50px;
        margin-bottom: 80px;
    }
    }


a:hover {
    color: white;
}

.nav-link:focus, .nav-link:hover {
    color: white;
}

/* efecto del border top */
.bordertopefecto {
    height:2px;
    width:100%;
    background:transparent;
}

.active .bordertopefecto,.nav-link:hover .bordertopefecto{
    background:linear-gradient(to left, #56566B, #fff,#56566B);
}
/* slider alto maximo */
.carruselrenders .carousel-inner img{
    max-height: 400px;
    width: auto !important;
    margin: 0 auto;
}
/* tabs residencias */
.navtabsresidencias li .nav-link{
    background-color: transparent;
    color: #b1b7a9;
    font-size: 1.1rem;
}
.navtabsresidencias li .nav-link.active{
    background-color: transparent;
    color: #4E5A3E;
}
.navtabsresidencias li .nav-link .bordertopefecto{
    height:2px;
    width:100%;
    background:transparent;
}
.navtabsresidencias li .nav-link.active .bordertopefecto{
    height:2px;
    width:80%;
    margin: 0 auto;
    background:linear-gradient(to left, #DAA95C, #fff,#DAA95C);
}


.ps-9{
color: #545556 !important;
font-size: 25px !important;
}

.body{
    background-color: #F5FAFF;
}

.pb-5{
    background-color: #F5FAFF;
}

li{
    color: white;
    font-weight: bold;
    font-size: 25px;
}

.linea-azul{
    border-bottom: 10px solid #29BDE5;
    width: 18%;
}

  

.linea-gris{
  border-bottom: 1px solid #56566B;
  width: 100%;
}

.linea-azul3{
  border-bottom: 6px solid #29BDE5 !important;
  width: 16% !important;
}

.linea-azul4{
  border-bottom: 6px solid #29BDE5 !important;
  width: 26% !important;
}




button > .MyClass1{
	content:url("img/humanus_icon_service1.png") !important;
  height:100px !important;
  width:100px !important;
}
button > .MyClass2{
	content:url("img/humanus_icon_service2.png") !important;
  height:100px !important;
  width:100px !important;
}
button > .MyClass3{
	content:url("img/humanus_icon_service3.png" ) !important;
  height:100px !important;
  width:100px !important;
}
button.active > .MyClass1{
  content: url("img/humanus_icon_service1-1.png") !important;
 }
 button.active > .MyClass2{
  content: url("img/humanus_icon_service2-1.png") !important;
 }
 button.active > .MyClass3{
  content: url("img/humanus_icon_service3-1.png") !important;
 }

* {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  p {
    font-size: 1.1em;
    margin: 1em 0;
  }
  
  .description {
    margin: 1em auto 2.25em;
  }
  
  h1 {
   
    font-weight: 400;
    font-size: 2em;
  }
  
  ul {
    list-style: none;
    
  }
  
  ul .inner {
    padding-left: 1em;
    overflow: hidden;
    display: none;
  }
  
  ul .inner.show {
    /*display: block;*/
  }
  
  ul li {
    margin: .5em 0;
  }
  
  ul li a.toggle {
    width: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.78);
    color: #fefefe;
    padding: .75em;
    border-radius: 0.15em;
    transition: background .3s ease;
  }
  
  ul li a.toggle:hover {
    background: rgba(0, 0, 0, 0.9);
  }
  
  .toggle:after {
    content: '\002B';
  }
  
  .toggle.active:after {
    content: "\2212";
  }
  
  .label:empty {
    display: none;
  }
  
  span {
    cursor: pointer;
  }
  
  .chapters {
    width: 100%;
    background-color: white;
    border-left: 1px solid rgb(230, 230, 230);
    border-right: 1px solid rgb(230, 230, 230);
    border-bottom: 1px solid rgb(230, 230, 230);
  }
  
  .view {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 1em;
  }
  
  .view li {
    padding: .5% 1%;
    border-top: 1px solid rgb(230, 230, 230);
  }
  
  .view li:hover {
    background: #f9f9f9;
  }
  
  .rows {
    text-decoration: none;
    display: flex;
    align-items: center;
    /*justify-content:space-between;*/
  }
  
  .play {
    padding-right: 10px;
    /*align-self:center;*/
  }
  
  .video-title {
    width: 60%;
    white-space: normal !important;
   
  }
  
  .view-preview,
  .length {
    color: #000;
    text-align: center;
  }
  
  .view-preview {
    width: 23%;
  }
  
  .length {
    width: 10%;
  }
  
  button.accordion {
    background-color: white;
    color: black;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
  }
  
  button.accordion.active,
  button.accordion:hover {
    background-color: #ddd;
  }
  
  button.accordion:after {
    content: '\002B';
    color: rgb(188, 41, 41);
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  button.accordion.active:after {
    content: "\2212";
  }
  
  div.panel {
    padding: 0 18px;
    background-color: white;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    display: none;
  }
  
  .toogle {
    float: left;
  }

  .fs-1{
    color: #46ABD8 !important;
    font-size: 40px !important;
    font-weight:bold;
  }


  .fs-2{
    color: #46ABD8 !important;
    font-size: 40px !important;
    font-weight:bold;
  }
  
  .fs-3{
 font-weight: bold;
    font-size: 37px !important;
  }

  .centrado{
    position: absolute;
    top: 54%;
    left: 20%;
    transform: translate(-50%, -50%);
}

.fs-4{
    font-weight: bold !important;
     font-size: 35px !important;
     
   }

   .fs-5{
     font-size: 30px !important;
     color: #46ABD8 !important;
     font-weight: bold;
   }

   .centrado2{
    position: absolute;
    top: 66%;
    left: 20%;
    transform: translate(-50%, -50%);
}

.centrado20{
  position: absolute;
  top: 74%;
  left: 20%;
  transform: translate(-50%, -50%);
}
.centrado21{
  position: absolute;
  top: 74%;
  left: 28%;
  transform: translate(-50%, -50%);
}

.fs-6{
  font-size: 60px !important;
  color: #343442!important;
  font-family: fantasy;
}

.centrado3{
  position: absolute;
  top: 310%;
  left: 25%;
  transform: translate(-50%, -50%);
}

.linea-azul3{
  border-bottom: 10px solid #29BDE5;
  width: 6% !important;
}

.centrado4{
  position: absolute;
  top: 320%;
  left: 20%;
  transform: translate(-50%, -50%);
}

.centrado5{
  position: absolute;
  top: 295%;
  left: 73%;
  transform: translate(-50%, -50%);
}

.fs-7{
  font-size: 30px !important;
  color: white !important;
 
}

.centrado6{
  position: absolute;
  top: 20%;
  left: 71%;
  transform: translate(-50%, -50%);
}

.centrado7{
  position: absolute;
  top: 50%;
  left: 62%;
  transform: translate(-50%, -50%);
}

.contenedor{
  position: relative;
  display: inline-block;
  text-align: center;
}

.centrado8{
  position: absolute;
  
  left: -51%;
  transform: translate( 150%, -125%);
}

.centrado9{
  position: absolute;
  top: 40%;
  left: 25%;
  transform: translate(-50%, -50%);
}

.centrado10{
  position: absolute;
  top: 57%;
  left: 20%;
  transform: translate(-50%, -50%);
}

.centrado11{
  position: absolute;
  top: 14%;
  left: 190%;
  transform: translate(-50%, -50%);
}

.centrado12{
  position: absolute;
  top: 26%;
  left: 16%;
  transform: translate(-50%, -50%);
}

.centrado13{
  position: absolute;
  top: 49%;
  left: 26%;
  transform: translate(-50%, -50%);
}

.centrado14{
  position: absolute;
  top: 59%;
  left: 25%;
  transform: translate(-50%, -50%);
}

.fs-8{
  font-weight: bold;
  font-size: 25px;
}

.fs-9{
  font-size: 40px !important;
  color: #343442!important;
  font-weight: bold;
}

.fs-10{
  font-size: 40px !important;
  color: #46ABD8 !important;
  font-weight: bold;
}

.fs-11{
  font-size: 30px !important;
  color: #000000 !important;
  font-weight: bold;
}

.fs-12{
  color: #000;
  font-size: 25px;
  font-weight: bold;
}


@media(min-width: 1120px){
  .mapa{
      width: 600px !important;
      height: 500px !important;
  }
  }



  .linea-azul8{
    border-bottom: 6px solid #29BDE5 !important;
    width: 51% !important;
    }