/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 16-ene-2018, 13:10:35
    Author     : Nacho
*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

div.clear{clear: both; margin-top: 10px;}
div.clear.grande{clear: both; margin-top: 20px;}
.sm_toolBox, .sm_zoomControl, .sm_mapTypeControl, .sm_colorPickerControl, .sm_colorPickerControl,
.sm_lineSettingsControl, .sm_searchControl, .sm_settings, .sm_fullScreen{display: none}
.agregar_elementos{position: absolute; top:0px; right: 0px; border: 1px solid #000; padding: 5px 10px; box-shadow: 1px 1px 5px #000; width: 300px; margin: 30px 50px;}
.agregar_elementos > span {float: left;}
.agregar_elementos > input[type=text] {float: right;}
.agregar_elementos.abajo{top: 300px;}

.fondo {
  font-family: "Roboto", sans-serif;
  background-color: #eee;
  width: 100%;
  margin: 0;
  padding: 0;
}

.contenido {
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  width: 100%;

  background-color: #aaa;

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;

  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
}

#cabecera {
  height: 115px;
  background-color: #ddd;
  border-bottom: #777 2px solid;
  position: relative;
  padding: 20px;
}

  #logo {
    width: 201px;
  }

    #logo img{
      width: 100%;
    }

  #titular {
    width: 350px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);

    font-size: 3.3em;
    font-weight: bold;
    text-align: center;
    color: #333;
  }

  #menu {
    width: 120px;
    float: right;
    position: absolute;
    bottom: 0;
    right: 20px;
  }

    #menu ul {
      list-style-type: none;
    }

      #menu ul a:link,
      #menu ul a:visited {
        text-decoration: none;
        color: #555;
      }

      #menu ul a:hover {
        color: #fff;
      }

      #menu ul li {
        padding-top: 4px;
        padding-bottom: 4px;
      }

#cabecera2{
  display: none;
  height: 60px;
  background-color: #ddd;
  border-bottom: #777 2px solid;
  position: fixed !important;
  padding: 20px 0px;
  z-index: 10;
  margin: 0;
  top: 0;
  left: 0;
  width: inherit;
}

#menu_mini{
  float: right;
  width: 50px;
  height: 50px;
  margin-top: -70px;
  margin-right: 20px;
  background-image: url('../images/menu_mini.png');
  cursor: pointer;
}

#el_mapa{
  height: 600px;
}

.flotante {
  color: #777;
  font-size: 1.2em;
  background-color: #fff;
  text-align: center;
  margin: 0px auto 0px;
  padding: 15px 30px;

  width: 20%;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;

  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  min-width: 260px;
}

  .flotante a.cerrarVentana {
   position: absolute;
   top:-14px;
   right:-11px;
   background-color: #777;
   padding:2px 5px 5px 5px;
   font-size: 1.4em;
   font-weight: bold;
   text-decoration: none;
   line-height: 1;
   color:#fff;

   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   border-radius: 8px;

   -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
   box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
  }

.formulario input:not(.boton),
.formulario text,
.formulario select {
  color: #000;
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #ccc;
  width: 100%;
  border: 0;
  margin: 10px 0 20px;
  padding: 5px 15px;
  box-sizing: border-box;
  font-size: 14px;

  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.formulario input::placeholder{color: #fff;}

.formulario input[type="checkbox"] { /* Esto es temporal */
  width: 2%;
}

.formulario .mitad {
  width: 45%;
  padding-right: 5%;
  float: left;
}

.formulario .tercio {
  width: 28%;
  padding-right: 5%;
  float: left;
}

.izq {
  float: left;
  padding-left: 5px;
  padding-right: 5px;
}

.der{
  float: right !important;
  margin-right: 5px !important;
  display: block !important;
}

.formulario select {
  background: url(../images/dropdown.png) no-repeat 103%;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #ccc;
}

.formulario button {
  background: #777;
}

.boton {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  outline: 0;
  background: #777;
  width: 100%;
  border: 0;
  padding: 5px 15px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  
  margin: 10px 0 20px;
  box-sizing: border-box;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  display: block;
  text-decoration: none;
}

.boton:hover, .boton:active, .boton:focus {
  background: #aaa;
}

.formulario .nueva {
  margin: 15px 0 0;
  color: #aaa;
  font-size: 12px;
}

.formulario .nueva a:link,
.formulario .nueva a:visited {
  color: #555;
  text-decoration: none;
}

.formulario .nueva a:hover {
  color: #000;
}

div.intereses > div.cont-interes{
  float: left;
  width: 30%;
  border: 1px dotted;
  margin: 2px;
}

div.intereses > div.cont-interes > img, div.cont-interes > input{
  display: block;
  float: none;
  margin: 5px auto;
}

#registro {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  color: #777;
  font-size: 1.2em;
  background-color: #fff;
  text-align: center;
  margin: 0 auto 10px;
  padding: 45px 0 20px;
}

#registro h1 {
  font-family: "Roboto", sans-serif;
  font-size: 1.6em;
  font-weight: bold;
  padding-bottom: 15px;
}

#registro h2 {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  font-weight: bold;
  padding-bottom: 15px;
}

hr {
  margin: 40px 0 40px 0;
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}


#sugerencias{position: absolute; width: 400px; left: 10px; background-color: #fff; top: 45px; font-size: 15px;}
#sugerencias > .opcion{border: 1px solid #000000; margin-bottom: 5px; cursor: pointer;}

.sm_infoWindow, .sm_infoWindow > div {height: auto !important;}

.sm_infoWindow .sm_infoWindow{background: #fff; border: 1px solid #000; width: auto !important;}

.sm_infoWindow > div > div > svg{display: none;}

/*MENSAJES*/
div.fondo{
    width: 100%;
    height: 100%;
    background-color: #000;
    position: fixed;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 100;
}

div.centro{
    width: 100%;
    height: 100%;
    position: fixed;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 101;
}

div.centro > div.Interior{
    margin: 60px auto;
    width: 95% !important;
    text-align: center;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #000;
    box-shadow: 2px 2px 5px #000;
    font-size: 25px;
    padding-top: 10px;
    max-height: 530px;
}

div.centro > div.Interior > div.caja{
    margin: 5px;
    width: 100%;
    overflow-y: scroll;
    height: 500px;
}

div.centro > div.Interior > img{
    width: 70px;
    display: block;
    margin: 20px auto;
}

div.grande{
    width: 90% !important;
    max-width: 800px;
    min-width: 300px;
    padding: 0px 20px 20px !important;
    text-align: left !important;
}

div.grande > p{
    font-size: 18px;
}

div.cierre{
    position: relative;
    border: 2px solid #000;
    background-color: #fff;
    border-radius: 25px;
    padding: 1px 8px;
    right: -40px;
    float: right;
    bottom: 20px;
    cursor: pointer;
}

.sm_infoWindow div{overflow: visible !important;}

div.sm_infoWindow.ampliado{
    width: 250px !important;
}

.sm_infoWindow > img + div{visibility: hidden !important; height: 5px !important;}

.sm_infoWindow .intereses{margin-top: 10px;}

.sm_infoWindow .intereses > img {width: 50px;}

.sm_infoWindow > .info_exta > div{clear: both;}

.sm_infoWindow > .info_exta > div > span{float: left;}

.sm_infoWindow > .info_exta > div > span+span{float: right;}

.sm_infoWindow .sm_close{top: 15px; left: 85px;}

.sm_infoWindow.ampliado .sm_close{top: 15px; left: 245px;}

.sm_infoWindow.ampliado > img{float: left;}

.sm_infoWindow.ampliado > .sm_bubbleTitle{display: none !important;}

.sm_infoWindow > .nombre_twitter{margin-top: 18px;}

.sm_infoWindow.ampliado > .nombre_twitter{float: right; clear: right;}

.sm_infoWindow > .sm_bubbleDescription{float: right; clear: right;}

.sm_infoWindow > .sm_bubbleDescription > a{background: #777; padding: 2px 5px; text-decoration: none; color: #fff; box-shadow: 1px 1px 0px #000;}

#ventana2{padding: 5px 20px;}

.mensaje{position: fixed !important;}

@media (max-width:860px){
  #cabecera{display: none;}
  #cabecera2{display: block;}
  #logo{margin-left: 20px; width: 150px; margin-top: -15px;}
  #el_mapa{margin-top: 100px;}
  #registro{margin-top: 100px;}
}

@media (max-width:480px){
    .agregar_elementos{right: auto !important; left: -30px;}
}