* {
  margin: 0px;
  padding: 0px;
}
::selection {
  background-color: #f4a1ae;
  color: #fff;
}

body {
  width: 100%;
  height: 100%;
  display: block;
  font-family: 'Ubuntu', sans-serif;
  padding: 0px;
  padding-bottom: 20px;
  background: #fff;
  box-sizing: border-box;
}

#estruc-titular {
  text-align: center;
  font-size: 1.4em;
  margin-top: 20px;
  color: #EC6277;
  margin: 16px 0px;
  font-family: 'Roboto', sans-serif;
}

#estruc-subtitular {
  text-align: left;
  font-size: .9em;
  line-height: 1.5em;
  margin: 4px auto 10px auto;
  color: #666;
  font-weight: normal;
  max-width: 1000px;
  box-sizing: border-box;
}
#fondo {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.4);
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  -webkit-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 11;
}
#fondo.toggled {
  opacity: 1;
  visibility: visible;
}
#explicacioncont {
 width: 300px;
 height: 495px;
 overflow-y: auto;
 overflow-x: hidden;
 max-width: 300px;
 left: calc(50% - 150px);
 z-index: 12;
 display: none;
 position: absolute;
 box-sizing: border-box;
 background-color: #fff;
 padding: 8px;
 margin-top: -47px;
 visibility: hidden;
 opacity: 0;
 -webkit-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
 -webkit-box-shadow: 0px 6px 12px -4px rgba(0,0,0,0.1);
 -moz-box-shadow: 0px 6px 12px -4px rgba(0,0,0,0.1);
 box-shadow: 0px 6px 12px -4px rgba(0,0,0,0.1);
 border: 3px solid #EC6277;
 padding-bottom: 20px;
}
#explicacioncont.toggled {
 display: block;
 opacity: 1;
 visibility: visible;
}
#explicacioncont p {
 display: block;
 position: relative;
 width: 100%;
 text-align: left;
 line-height: 1.4em;
 padding: 6px 0px;
 font-size: .9em;
 border-top: solid 1px rgba(0,0,0,.2);
}
#explicaciontitular {
 position: relative;
 display: inline-block;
 width: calc(100% - 46px);
 height: 50px;
 margin-top: -8px;
 margin-left: -8px;
}
#explicaciontitular h1 {
 font-family: 'Roboto';
 color: #EC6277;
 font-size: 1.1em;
 text-align: center;
 margin-right: -65px;
 line-height: 50px;
 font-weight: normal;
}
#explicacioncerrar {
 position: relative;
 display: inline-block;
 width: 44px;
 height: 44px;
 top: -11px;
 right: -16px;
 border: 3px solid #EC6277;
 background: #fff;
 -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
 -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
 box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
 cursor: pointer;
 -webkit-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
}
#explicacioncerrar:hover {
 background: rgb(239, 128, 145);
}
#explicacioncerrar:hover .navbarra1, #explicacioncerrar:hover .navbarra3{
 background: #fff;
}

.navbarra1, .navbarra3 {
 width: 32px;
 height: 3px !important;
 background-color: #EC6277;
 margin: 0px auto 0px auto;
 transition: 0.4s;
}

.navbarra1{
 margin-top: -7px;
 -webkit-transform: rotate(45deg) translate(0px, -8px);
 transform: rotate(45deg) translate(0px, -8px);
 transform-origin: top left;
}


.navbarra3 {
   -webkit-transform: rotate(-45deg) translate(-7px, 12px);
   transform: rotate(-45deg) translate(-7px, 12px);
   transform-origin: top left;
}
#grafico {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

#estruc-foot {
  line-height: 1.5em;
  margin: 0px auto 10px auto;
  padding: 4px;
  max-width: 1000px;
  box-sizing: border-box;

}
#estruc-foot-cont {
  width: 100%;
  display: block;
  position: relative;
  box-sizing: border-box;
}
#estruc-logo {
  width: 50px;
  display: inline-block;
  height: auto;
  vertical-align: middle;
}
#estruc-fuente {
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  font-size: .9em;
  line-height: 1.3em;
  padding: 2px;
  width: calc(100% - 320px);
  color: #444;
  display: inline-block;
  font-style: italic;
  vertical-align: middle;
}
#estruc-fuente a{
  color: #222;
  font-weight: normal;
}
#estruc-cont-bot {
  width: 250px;
  display: block;
  vertical-align: top;
  float: right;
}
#estruc-foot button {
  cursor: pointer;
  width: 80px;
  height: 30px;
  background-color: #fafafa;
  border: 3px solid #EC6277;
  display: inline-block;
  font-size: .65em;
  font-weight: normal;
  font-family: 'Ubuntu', sans-serif;
  text-align: left;
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0,0.1);
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline:none;
}
#boton-datos {
  display: inline-block;
}
#estruc-foot button:before{
  content: '';
  background-color: #EC6277;
  height: 29px;
  width: 77px;
  position: absolute;
  display: block;
  transform-origin: center;

  margin-top: -4px;
  margin-left: -1px;
  -ms-transform: scale(0,0);
  -webkit-transform: scale(0,0);
  transform: scale(0,0);
  transition:all 0.3s ease-in-out;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
}
#estruc-foot button:hover:before{
  -ms-transform: scale(1,1);
  -webkit-transform: scale(1,1);
  transform: scale(1,1);
}

#estruc-foot button img {
  position: relative;
  display: inline-block;
  width: 20px;
  margin-left: 2px;
  vertical-align: middle;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
}

#estruc-foot button:hover img{
  -webkit-filter: grayscale(100%) brightness(200%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%) brightness(200%);
}
#estruc-foot button p {
  display: inline-block;
  position: relative;
  text-align: left;
  width: calc(100% - 30px);
  height: auto;
  vertical-align: middle;
}
#estruc-foot button:hover p {
  color: #fff;
  font-weight: bold;
}
#foot-embed {
  margin: 20px 0px 12px 0px;
  display: none;
  position: relative;
  width: 100%;
  pointer-events: none;
}
#foot-embed.pulsado {
  display: block;
}
#foot-embed p {
  font-size: .85em;
  font-style: italic;
  color: #444444;
  margin: 6px 0px;
  text-align: center;
  font-weight: bold;
}
#estruc-foot #foot-embed button {
  pointer-events: all;
  vertical-align: middle;
}
#estruc-foot #foot-embed button p{
  font-size: 1.1em;
  color: #000;
  margin: 0px;
  font-weight: normal;
}
#estruc-foot #foot-embed button:hover p{
  font-size: 1.1em;
  color: #fff;
  font-weight: bold;
}
#foot-embed input {
  box-sizing: border-box;
  pointer-events: all;
  width: calc(100% - 86px);
  vertical-align: middle;
  padding: 4px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #EC6277;
  background: rgba(0,0,0,.05);
}
/*FORMS*/
form#radios, form#radios2{
  position: relative;
  display: block;
  width: calc(100% - 2px);
  background-color: #ffffff;
  max-width: 300px;
  height: 36px;
  margin: 8px auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
form#radios input[type="radio"], form#radios2 input[type="radio"]{
  display: none;
}
form#radios span, form#radios2 span {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  margin: 1px;
  background-color: #fafafa;
  border: 3px solid #EC6277;
  font-size: 1.2em;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  width: calc(50% - 5px);
  height: 36px;
  text-align: center;
  cursor: pointer;
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0,0.1);
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
  color: rgb(102, 102, 102);
}

form#radios span p, form#radios2 span p {
  z-index: 2;
  display: block;
  position: relative;
  text-shadow: 0px 1px rgba(0,0,0,.2);
  font-size: .75em;
  margin-top: 7px;
  letter-spacing: 0.1em;
  transition:all 0.3s ease-in-out;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
}

form#radios span:before, form#radios2 span:before{
  content: '';
  background-color: #EC6277;
  opacity: .8;
  height: 31px;/*31*/
  width: calc(100% + 1px);
  position: absolute;
  display: block;
  transform-origin: center;
  -ms-transform: scale(0,1);
  -webkit-transform: scale(0,1);
  transform: scale(0,1);
  transition:all 0.3s ease-in-out;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
}
form#radios span:hover:before, form#radios2 span:hover:before{
  -ms-transform: scale(1,1);
  -webkit-transform: scale(1,1);
  transform: scale(1,1);
}
form#radios span:hover p, form#radios2 span:hover p{
  color: #fff;
  letter-spacing: 0.14em;
  transition:all 0.3s ease-in-out;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
}
form#radios input[type="radio"]:checked + span, form#radios2 input[type="radio"]:checked + span  {
  background-color: #fafafa;
}
form#radios input[type="radio"]:checked + span:before, form#radios2 input[type="radio"]:checked + span:before {
  -ms-transform: scale(1,1);
  -webkit-transform: scale(1,1);
  transform: scale(1,1);
  background-color: #EC6277;
  opacity: 1;
}
form#radios input[type="radio"]:checked + span p, form#radios2 input[type="radio"]:checked + span p {
  color: #fff;
}
form#radios input[type="radio"]:checked:hover + span p, form#radios2 input[type="radio"]:checked:hover + span p {
  color: #fff;
  letter-spacing: 0.1em;
}
/*FIN DE FORMS*/

/*TOOLTIPS*/
.tooltip {
  color: #222;
  background: rgba(255,255,255,.9);
  padding: .5em;
  text-shadow: #f5f5f5 0 1px 0;
  border: 1px solid rgba(0,0,0,.5);
  border-radius: 2px;
  box-shadow: 0px 0px 2px 0px #a6a6a6;
  position: absolute;
  display: none;
  pointer-events: none;
  width: 185px;
  z-index: 8;
}

#tooltipV01{
  border-bottom: 2px solid #EC6277;
  line-height: 1.2em;
  text-align: center;
  font-size: .8em;
  font-weight: bold;
  color: #555;

}
#tooltipV02{
  margin-top: 6px;
  font-size: 1em;
  text-align: center;
  color: #444;
}

#tooltipV01, #tooltipV02, #tooltipV03, #tooltipV04, #tooltipV05 {
  font-size: .85em;
  text-align: center;
}

#tooltipMas {
  margin-top: 6px;
  font-size: .7em;
  text-align: center;
  color: #222;
  font-style: italic;
  padding-top: 4px;
  border-top: 1px solid rgba(0,0,0,.2);
}

.tick line {
  stroke: #ddd !important;
}

.x path {
  stroke: #ddd !important;
}

p {
  font-size: .9em;
  color: #555;
  line-height: 1.4em;
}

/*FIN TOOLTIPS*/
@media (max-width: 1010px) {
  #estruc-titular {
    font-size: 1.4em;
    padding: 0px 4px;
    margin-bottom: 8px;
  }
  #estruc-subtitular {
    font-size: .85em;
    padding: 0px 4px;
  }
  #grafico {
    margin: 0px auto;
    width: 98%;
  }
  #estruc-foot {
    margin: 0px 4px;
    width: calc(100% - 8px);
  }
  #estruc-fuente {
    font-size: .85em;
    padding: 0px 4px;
  }
}

@media (max-width: 500px) {
  body {
    padding-bottom: 60px;
  }
  #estruc-titular {
    font-size: 1.15em;
  }
  #estruc-subtitular {
    font-size: .8em;
  }
  #estruc-fuente {
    width: calc(100% - 70px);
  }
  #estruc-cont-bot {
    width: 100%;
    margin-top: 4px;
  }
  #estruc-cont-bot button{
    float: right;
    margin-left: 2px;
    outline: none;
  }
  .tooltip {
    width: 135px;
  }
  #tooltipV01 {
    font-size: .8em;
  }
  #tooltipMas {
    font-size: .65em;
  }
  #boton-datos {
    display: none !important;
  }
  form#radios span p, form#radios2 span p{
    font-size: .5em;
    margin-top: 10px;
  }
}