:root {
  --menu: white;
  --menuTexto: black;
  --menuHover: #27a0fb;

  --fondo: #f4e4cc;
  --fondoSlider: #f4e4cc;
  --fondoPropiedadesZona: #f4e4cc;
  --contacto: #080e14;
  --pie: #262626;
  --pieTexto: white;
  --phonebox: #f4e4cc;
  --phoneboxTexto: black;

  --transparencia: 99, 79, 37; /*Normalmente =acentos*/ 
  --transparenciaPO: 99, 79, 37; /*Primer Oportunidad, normalmente =transparencia*/
  --transparenciaTexto: #cccccc; /*Normalmente =textoColor*/
  --transparenciaTextoAcento: white;

  --fondoDestacadasYEnSuZona: #080e14; /*Normalmente =menu*/
  --textoDestacadasYEnSuZona: #ae9e3b; /*Normalmente =acentos o =textoColor*/

  --formulario: #d7c89f;
  --formularioTexto: #634f25;

  --boton: #ae9e3b;
  --botonTexto: white;
  --botonHover: #a08529;
  --botonTextoHover: white;

  --acento: #a08529;

  --texto: black;
  --textoColor: #ae9e3b;
}

body {
  background-color: var(--fondo);
  color: var(--texto);
}

h1 {
  color: var(--texto);
}

h3 {
  color: var(--transparenciaTexto);
}

a {
  color: var(--textoColor);
}

a:hover {
  color: var(--acento);
}


/*********************** BARRA SUPERIOR DEL LOGO Y MENU ***********************/
.navbar {
  background-color: var(--menu); 
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--menuTexto); 
}

/* En principio controla el link del login en la PC */
#user_block a {
  color: var(--menuHover);
}

#user_block button {
  background-color: var(--boton);
  color: var(--botonTexto);
}
#user_block button:hover {
  background-color: var(--botonHover);
  color: var(--botonTextoHover);
}

#main_menu a:hover {
  color: var(--menuHover); 
}

/*
.login_link {
  color: red;
}
*/

/********************************* BOTONES ************************************/
.btn-primary { /*2a oportunidad*/
  background-color: var(--boton);
  color: var(--botonTexto);
}
.btn-primary:active, .btn-primary:hover {
  background-color: var(--botonHover);
  color: var(--botonTextoHover);
}

.btn-secondary {
  background-color: var(--boton);
  color: var(--botonTexto);
}
.btn-secondary:active, .btn-secondary:hover {
  background-color: var(--botonHover) !Important;
  color: var(--botonTextoHover);
}

.btn-warning {
  background-color: var(--boton);
  color: var(--botonTexto) !Important;
}
.btn-warning:active, .btn-warning:hover {
  background-color: var(--botonHover);
  color: var(--botonTextoHover) !Important;
}

.btn-light {
  background-color: var(--boton);
  color: var(--botonTexto);
}
.btn-light:active, .btn-light:hover {
  background-color: var(--botonHover);
  color: var(--botonTextoHover);
}


/******************************** FOOTER **************************************/
footer {
  background-color: var(--contacto);
}

#contact_data {
  color: var(--textoColor);  
}

#contact_data h4 {
  color: var(--textoColor);
}

#phone_box {
  background-color: var(--phonebox);
  color: var(--phoneboxTexto);
}

.footer-copyright {
  background-color: var(--pie);
  color: var(--pieTexto);
}

#quick_search_container {
  background-color: var(--menu); /* Afecta mobile */
}

#quick_search input, #quick_search select, #quick_search #submit_button{
  background-color: black;
  border-color: white;
  color: white;
}

/* Imágenes sociales son blancas, en footers claros las invertimos con el código que sigue*/
/*.social-icons img{
  -webkit-filter: invert(100%);
  filter: invert(20%);
}
*/
.rounded img{
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

/* Imágenes de whatsapp idem: blancas por defecto, así que hay que invertirlas en fondos claros */
.float-right img{
  -webkit-filter: invert(100%);
  filter: invert(100%);
}


/************************** PRIMER OPORTUNIDAD ********************************/
#opportunity {
  background-color: rgba(var(--transparenciaPO), 0.5);
  color: var(--transparenciaTextoAcento);
}

#opportunity .my-4 {
  color: var(--transparenciaTexto);
}

#opportunity .line {
  border-color: var(--transparenciaTexto);
}

#opportunity button {
  background-color: var(--boton);
  color: var(--botonTexto);
}
#opportunity button:active, #opportunity button:hover {
  background-color: var(--botonHover);
  color: var(--botonTextoHover);
}


/****************** PROPIEDADES DESTACADAS Y EN SU ZONA ***********************/
.title h2 {
  background-color: var(--fondoDestacadasYEnSuZona);
  color: var(--textoDestacadasYEnSuZona);
}

.help-block {
  color: var(--texto);
}

.error, .alert-error {
  color: #e53114;
}

.colored-text {
  color: var(--acento);
}

.colored-text-light {
  color: var(--acento);
}

.separator {
  border-color: var(--textoColor);
}

.pager ul .page-item .page-link {
  background-color: var(--acento);
  color: var(--texto);
}

.pager ul .active .page-link, .pager ul .page-item .page-link:hover {
  color: var(--fondo);
}

.pager ul .disabled .page-link {
  color: var(--acento);
}

#order_selection #order {
  color: var(--textoColor);
}


/************************* PROPIEDADES DESTACADAS *****************************/
#highlights {
  background-color: var(--fondoSlider);
}

.property-info {
  background-color: rgba(var(--transparencia), 0.75); 
  color: var(--transparenciaTexto); 
}

.add-fav a {
  color: var(--textoTransparencia); /*Icono favoritos -corazon-*/
}

.precioprop {
  color: var(--transparenciaTextoAcento); /*Color del precio de las propiedades destacadas*/
}

.slide-image {
  background-color: transparent !Important;
}

#slider_thumbs .owl-nav .owl-prev .owl-next {
    color: black !Important;
}

/************************* PROPIEDADES EN SU ZONA *****************************/
#local_properties {
  background-color: var(--fondoPropiedadesZona); 
}

#pac-input {
  /* background-color: #464646;*/
  background: #333333 url(../../images/lens-small.png) no-repeat right 10px center;
  color: #CCCCCC;
}

#pac-input:focus {
  border-color: var(--texto);
}


/**************************** SEGUNDA OPORTUNIDAD *****************************/
#opportunity_section h2 {
    color: white;/*var(--texto);*/
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/*Texto segunda oportunidad*/
#opportunity_section p {
  color: var(--acento); 
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}


/******************************** NOTICIAS ************************************/
#news {
  color: var(--textoColor);
}

.post a {
  color: var(--texto);
}

.post .author {
  font-weight: bold;
  color: var(--texto) !Important;
}

.post {
  border-bottom-color: var(--textoColor);
}

.post a h3 {
  color: var(--texto);
}

#to_top i {
  color: var(--acento);
}

#to_top a {
  color: var(--texto);
}

#image_bar {
  background: var(--fondo);
}

#news_index {
  background: var(--fondo);
}

#resume {
  color: var(--textoColor) !Important;
}

/******************************* PÁGINA EMPRESA *******************************/
#contact_form .form-control {
    background-color: var(--formulario);
    color: var(--formularioTexto);
}

#contact_form h3 {
    color: var(--texto);
}

#real_search .row div input, #real_search .row div button {
    background-color: transparent;
    border-color: var(--texto);
    color: var(--texto);
}

#view_all a {
    color: var(--texto);
}

#view_all i {
    color: var(--acento);
}


/******************************* PÁGINA NOTICIAS ******************************/
.page-item.active .page-link {
    background-color: var(--formulario);
    border-color: var(--acento);
}

.page-link {
    color: var(--acento);
}

#post_body {
    background-color: var(--fondo);
}

#read_more a {
    color: var(--texto);
}

#read_more i {
    color: var(--acento);
}

#link_top_to_back {
    color: var(--texto);
}

#slider_thumbs ul .owl-nav .owl-prev i, #slider_thumbs ul .owl-nav .owl-next i {
    color: var(--acento);
}

/******************************** SOBRE NOSOTROS ******************************/
#real_estate_profile h3 {
    color: var(--texto);
}

.extras h3 {
    color: var(--texto);/*#eec216;*/
}

.white-bottom {
    border-bottom: var(--colorTextoOscuro) solid 2px;
}

/* color texto sobre nosotros */
#about_description {
    color: var(--textoColor); 
}

/* cuadro imagen mision */
.color-box {
    background-color: var(--formulario);
    color: var(--textoColor);
}

.color-box h2 {
    color: var(--texto);
}

.user-end {
    background-color: var(--acento);
}

.user-end h1 {
    color: var(--acento);
}

.user-end .form-group label {
    color: var(--acento);
}

.user-end .form-group input, #back_button {
    background-color: var(--acento);
    color: var(--acento);
}

.user-modal .modal-dialog .modal-content {
    background-color: var(--acento);
}

.user-modal .modal-dialog .modal-content h3 {
    color: var(--texto);
}

#login_modal .user-end {
    background-color: var(--acento);
    color: var(--texto);
}

#login_modal .user-end .form-group label {
    color: var(--texto);
}

#login_modal .user-end .form-group input {
    background-color: var(--textoColor);
    color: var(--fondo);
}

#login_modal .user-end a {
    color: var(--texto);
}

#login_modal .user-end h1 {
    color: var(--texto);
}


/***************************** PÁGINA BÚSQUEDA ********************************/
#search_form .form-control {
  background-color: var(--formulario);
  color: var(--formularioTexto);
}

#search_form .btn-secondary, #search_form .btn-group-toggle .btn-secondary:hover {
  background-color: var(--formulario);
}

.btn-secondary {
  background-color: var(--boton);
  color: var(--botonTexto) !Important;
}
.btn-secondary:active, .btn-secondary:hover {
  background-color: var(--botonHover);
  color: var(--botonTextoHover) !Important;
}

.btn-group-toggle .radio-selector {
  border-color: var(--formulario) !Important;
  color: var(--formularioTexto) !Important;
}
.btn-group-toggle .radio-selector:hover {
  background-color: var(--formulario) !Important;
  color: var(--botonTexto) !Important;
}
.btn-group-toggle .radio-active {
  color: var(--acento) !Important;
}

#currency_symbol {
  color: var(--texto);
}

#order {
  color: var(--texto) !Important;
}

.slider-handle {
  background-color: var(--formulario);
  background-image: linear-gradient(to bottom, var(--formulario) 0, var(--acento) 100%);
}

.speech-bubble {
  background: var(--formulario);
  color: var(--formularioTexto);
}

.speech-bubble:after {
    border: 7px solid transparent;
    border-bottom-color: var(--acento);
}

.search-button span {
    display: none;
}

.alt-slider {/*.property-info {*/
    background-color: rgba(var(--transparencia), 0.3);
}

#results_desktop .result { /*.property-info {*/
    color: var(--texto);
}

.form-control-sm {
  background-color: var(--formulario);
  color: var(--formularioTexto);
}

/* Imágenes son blancas, en templates claros las invertimos con el código que sigue*/
/*
.col-2 img{
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
.d-flex img{
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
*/

/******************************** MOBILE **************************************/
@media (max-width: 767px  ) {
/* Toma el color del cabezal del menu
    .navbar {
        background-color: var(--acento);
    }
*/

  /* Para cambiar matices del color de iconos de menu y cerrar */
/*
  .close {
    -webkit-filter: invert(100%);
    filter: invert(100%); 
  }
*/
  .hamb-icon {
    -webkit-filter: invert(100%);
    filter: invert(30%);
  }

  .navbar-dark .navbar-nav .nav-link {
    color: var(--menuTexto);
  }

  /* afecta propiedades destacadas y en su zona */
  .title h2 {
    color: var(--textoColor);
    font-size: 28px;
    padding: 11px 0px;
  }

  #quick_search input, #quick_search select, #quick_search #submit_button {
    color: var(--formularioTexto);
    background-color: var(--formulario);
  }

  #quick_search input::placeholder {
    color: var(--textoColor);
  }

  #pac-input {
    border-color: var(--acento);
    color: color: #CCCCCC;
  }

  #pac-input:focus {
    border-color: var(--acento);
  }

  #opportunity {
    background-color: rgba(var(--transparenciaPO), 0.5);
  }

  #opportunity button {
    background-color: var(--boton);
    color: var(--botonTexto);
  }
  #opportunity button:active, #opportunity button:hover {
    background-color: var(--botonHover);
    color: var(--botonTextoHover) !Important;
  }

  #close_opportunity {
    color: var(--menuHover);
  }

  #news .container .row .col button {
    background-color: transparent;
    color: var(--acento);
  }

  #contact_form {
    background-color: var(--fondo);
    color: var(--acento);
  }

  #contact_form .control-label, #search_form .control-label {
    color: var(--texto);
  }

  #contact_form .form-control {
    background-color: var(--formulario);
  }

  #contact_form button {
    background-color: var(--acento) !Important;
    color: var(--menuTexto) !Important;
  }

  .btn-secondary{
    background-color: var(--boton) !Important;
    color: var(--botonTexto) !Important;
  }

  #btn-primary:hover {
    background-color: var(--botonHover) !Important;
    color: var(--botonTextoHover) !Important;
  }

  #extra_info {
    color: var(--texto);
  }

  #property_card {
    background-color: var(--fondo);
  }

  .real-estate-mini {
    color: var(--acento);
  }

  #data_sheet {
    background-color: var(--acento);
  }

  .extras h3 {
    color: var(--texto);
  }

  #about_us {
    background-color: var(--fondo);
  }

  #about_us h2 {
    color: var(--textoColor);
  }

  #about_description, #about_description_2 {
    color: var(--texto);
  }

  #contact_form h2 {
    color: var(--textoColor);
  }
	
  h3 {
    color: var(--textoColor);
  }

  .color-box {
    background-color: transparent;
  }

  .user-end {
    background-color: var(--acento);
    color: var(--textoColor);
  }

  .user-end .form-group label {
    color: var(--textoColor);
  }

  .user-end .form-group input, #back_button {
    background-color: var(--textoColor);
    color: var(--acento);
  }

  .user-end a {
    color: var(--textoColor);
  }

  .user-end h1 {
    color: var(--textoColor);
  }

  #search_container {
    background-color: var(--fondo);
  }

  .search-button span {
    background-color: var(--acento);
  }

  #search_bar_container {
    border-color: var(--fondo);
  }

  #main_search_menu {
    background-color: rgba(var(--transparencia), 0.75);
  }

  #search_form .form-control {
    background-color: var(--formulario);
  }

  #search_form .form-check-label {
    color: var(--acento);
  }

}