/* RESET */
*{
    box-sizing:border-box
}
body,html{
    margin:0;
    padding:0
}


/* COMUNES */
#infografia_a31 .oculto{
    visibility: hidden;
}
#infografia_a31 .visible_xl{
    display: inherit;
}
#infografia_a31 .visible_s{
    display: none;
}
#infografia_a31 .puntero{
    cursor:pointer; 
    pointer-events:auto;
}
#infografia_a31 .no_puntero{
    pointer-events:none;
}
#infografia_a31 .super_opaco{
    opacity: 1 !important;
}

#infografia_a31 .naranja{
  color: #FF5A00;
}
#infografia_a31 .azul{
  color: #0063be;
}

#infografia_a31 .color1{
  color: #5BC9D6;
}
#infografia_a31 .color2{
  color: #FF7C74;
}
#infografia_a31 .color3{
  color: #A4BA08;
}




#infografia_a31 .verde_oscuro{
  color: #487e2e;
}
#infografia_a31 .verde_claro{
  color: #8fa10a;
}
#infografia_a31 .bandera_der{
  text-align: right !important;
}
#infografia_a31 .txt_centado{
  text-align: center !important;
}



/* MOUSE */
#infografia_a31 #area_mouseScroll{
  position: absolute;
  top: 150px; /* de 120 a 390*/
  left: 337px; /* (746 - 72 )/2*/

}
#infografia_a31 #cont_mouseScroll{
  transform: scale(0.6, 0.6);

}


/*  MODAL */
#infografia_a31 #area_modal{
  width: 100%;
  height: 1500px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color:rgba(0, 0, 0, 0.8);
  z-index: 2;
}



/* VENTANAS */
#infografia_a31 #area_ventanas{
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  pointer-events: none;
}
#infografia_a31 #cont_ventana{
  position: relative;
  width: 100%;
  left: 50%;
  height: 600px;
  pointer-events: none;
}
#infografia_a31 #area_ventanas #cont_ventana2{
  position: relative;
  left: -135px;
  top: 150px;
  height: 160px;
  width: 270px;
  border-radius: 8px;
  background-color: #FFFFFF;
  pointer-events: inherit;
  z-index: 3;
}
#infografia_a31 #area_ventanas .ventana{
  position: absolute;
  padding-left: 10px;
  padding-right: 10px;
}
#infografia_a31 #area_ventanas #bt_cerrar{
  position: relative;
  left: 111px;
  top: 7px;
}






/* GENERALES INFOGRAFIA */
#infografia_a31{
    font-family:HelveticaNeue,Helvetica,sans-serif;
    background-color: #e1eade;
    background-image: url("../img/a31_fondo_D.jpg");
    background-size: cover;
    color: #4a4a4a; 
    overflow: hidden;
    width: 100%;
    max-width: 746px;
    margin-bottom: 30px;
    display: inline-block;
    border-top: 7px solid #5c8a1f; 
    border-bottom: 7px solid #5c8a1f; 
    height: 827px; /*ALTO PIEZA DESKTOP*/
}
#infografia_a31 #contenido_infografia{
    position: relative;
    text-align: center;
    vertical-align: top;

}


/* TRIGGERS */
#infografia_a31 .a31_trigger_area{
  width: 30px;
  height: 30px;
  background-color: #ff0000;
  position: absolute;
}
#infografia_a31 #a31_trigger_area0{
    top: 98px;
}
#infografia_a31 #a31_trigger_area1{
    top: 361px;
}
#infografia_a31 #a31_trigger_area2{
    top: 1286px;
}
/*
#infografia_a31 #a31_trigger_area2{
  width: 30px;
  height: 30px;
    background-color: #ff0000;
    position: absolute;
    top: 290px;
}
#infografia_a31 #a31_trigger_area3{
  width: 30px;
  height: 30px;
    background-color: #ff0000;
    position: absolute;
    top: 515px;
}
#infografia_a31 #a31_trigger_area4{
  width: 30px;
  height: 30px;
    background-color: #ff0000;
    position: absolute;
    top: 525px;
}

#infografia_a31 #a31_trigger_area5{
  width: 30px;
  height: 30px;
    background-color: #ff0000;
    position: absolute;
    top: 820px;
}
#infografia_a31 #a31_trigger_area6{
  width: 30px;
  height: 30px;
    background-color: #ff0000;
    position: absolute;
    top: 830px;
}
#infografia_a31 #a31_trigger_area7{
  width: 30px;
  height: 30px;
    background-color: #ff0000;
    position: absolute;
    top: 1060px;
}
#infografia_a31 #a31_trigger_area8{
  width: 30px;
  height: 30px;
    background-color: #ff0000;
    position: absolute;
    top: 1070px;
}
#infografia_a31 #a31_trigger_area9{
  width: 30px;
  height: 30px;
    background-color: #ff0000;
    position: absolute;
    top: 1316px;
}
*/


/* CENTRADOR */
#infografia_a31 .cont_centrador{
    position: absolute;
    width: 100%;
    left: 50%;
    top: 0px;
    height: 100%;
    
}
#infografia_a31 .cont_centrador2{
    position: relative;
    width: 746px;
    left: -376px;
    top: 0px;
    height: 100%;
}


/* CABECERA */
#infografia_a31 #cabecera{
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    height: 212px;
}
#infografia_a31 #logo_cabecera{
    padding-bottom: 10px;
}
#infografia_a31 #cabecera #cont_titular{
  position: absolute;
  width: 746px;
  height: 134px;
}
#infografia_a31 #cabecera .color_verde_oscuro{
 color: #487e2e;
}

#infografia_a31 #cabecera #cont_titular2{
  position: relative;
}

#infografia_a31 #cabecera #titular_cabecera{

  text-align: center;
  font-family:HelveticaNeueLT-W05-77-BdCn,Helvetica,sans-serif;
  color: #487E2E;
  font-size:31px;

}
#infografia_a31 #cabecera #titular_inf{
  text-align: center;
  font-family:HelveticaNeueLT-W05-67-MdCn,Helvetica,sans-serif;
  color: #8FA10A;
  font-size:26px;
  margin: auto;
  margin-top: -10px;
}
#infografia_a31 #cabecera #hazclic_inf{
  text-align: center;
  font-family:HelveticaNeueLT-W05-57-Cond,Helvetica,sans-serif;
  color: #696969;
  font-size:11px;
  margin: auto;
  margin-top: 5px;
}
#infografia_a31 #segundo_titular{
  position: absolute;
  top: 500px;
}

#infografia_a31 #segundo_titular #cont_titular{
 width: 100%;
}
#infografia_a31 #segundo_titular #cont_titular2{
 width: 746px;
}

#infografia_a31 #segundo_titular #titular_segundo_titular{
  
  text-align: center;
  font-family:HelveticaNeueLT-W05-77-BdCn,Helvetica,sans-serif;
  color: #155766;
  font-size:30px;
  margin: auto;
  margin-top: 0px;
  

}




#infografia_a31  #svg_a31{
  position: absolute;

  left: 0%;
}





#infografia_a31  #fuente{
  position: absolute;
  left: 20px;
  top: 790px;
  font-family:HelveticaNeue,Helvetica,sans-serif;
  font-size: 11px;
  color: #244E12;
}




/* SVG  */
#infografia_a31 .cont_svg_a31{
    position: absolute;
    width: 746px;
    height: 973px; 
    
}



#infografia_a31 .texto_info{
    font-family:HelveticaNeueLT-W05-57-Cond,Helvetica,sans-serif;
    color: #464646;
    font-size: 13px;
    line-height: 16px;
    text-align: left;
}
#infografia_a31 .titular_info{
    font-family:HelveticaNeueLT-W05-77-BdCn,Helvetica,sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 18px;
}
#infografia_a31 .txt_epigrafe{
    font-family:HelveticaNeueLT-W05-77-BdCn,Helvetica,sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 14px;
}


#infografia_a31 .titular_ventana{
  margin-top: 15px;

}
#infografia_a31 .contenido_ventana{
  margin-top: 15px;
  padding-left: 20px;;
  padding-right: 20px;;
}




#infografia_a31 #epi_1{
    position: absolute;
    left: 229px;
    top: 167px;
    width: 80px;
}
#infografia_a31 #epi_2{
    position: absolute;
    left: 370px;
    top: 172px;
    width: 95px;
}
#infografia_a31 #epi_3{
    position: absolute;
    left: 235px;
    top: 423px;
    width: 100px;
}
#infografia_a31 #epi_4{
    position: absolute;
    left: 332px;
    top: 448px;
    width: 100px;
}
#infografia_a31 #epi_5{
    position: absolute;
    left: 449px;
    top: 420px;
    width: 60px;
}


#infografia_a31 #info_1{
    position: absolute;
    left: 74px;
    top: 176px;
}
#infografia_a31 #info_1 .titular_info{
  width: 265px;
}
#infografia_a31 #info_1 .contenido_info{
  width: 265px;
}





#infografia_a31 #info_2{
    position: absolute;
    left: 428px;
    top: 178px;
}
#infografia_a31 #info_2 .titular_info{
  width: 205px;
}
#infografia_a31 #info_2 .contenido_info{
  width: 205px;
}


#infografia_a31 #info_3{
    position: absolute;
    left: 60px;
    top: 690px;
}
#infografia_a31 #info_3 .titular_info{
  width: 170px;
}
#infografia_a31 #info_3 .contenido_info{
  width: 170px;
}


#infografia_a31 #info_4{
    position: absolute;
    left: 261px;
    top: 733px;
}
#infografia_a31 #info_4 .titular_info{
  width: 230px;
}
#infografia_a31 #info_4 .contenido_info{
  width: 230px;
}



#infografia_a31 #info_5{
    position: absolute;
    left: 532px;
    top: 690px;
}
#infografia_a31 #info_5 .titular_info{
  width: 175px;
}
#infografia_a31 #info_5 .contenido_info{
  width: 175px;
}







@media screen and (max-width:746px){

    #infografia_a31 .visible_xl{
        display: none;
    }
    #infografia_a31 .visible_s{
        display: inherit;
    }

    #infografia_a31 .bandera_der_xl{
      text-align: initial !important;
    }
    #infografia_a31 .bandera_der_s{
      text-align: right !important;
    }


    #infografia_a31{

      
      background-position: center;
      height: 515px; /* ALTO PIEZA MOVIL*/
    }

    #infografia_a31 #cabecera{
      height: 184px;
    }

    #infografia_a31 #cabecera #cont_titular{
      position: absolute;
      left: 0px;
      top: 53px;
      width: 100%;
      height: 100px;

    }

    #infografia_a31 #cabecera #cont_titular2{
      margin: auto;
      width: 320px;
      height: 100px;


    }

    #infografia_a31 #cabecera #titular_cabecera{
      
      font-family:HelveticaNeueLT-W05-77-BdCn,Helvetica,sans-serif;
      font-size:23px;
      line-height: 24px;
      width: 100%;
      margin: auto;
      padding-top: 15px;
    }

    #infografia_a31 #cabecera #titular_inf{
      text-align: center;
      font-family:HelveticaNeueLT-W05-77-BdCn,Helvetica,sans-serif;
      color: #609809;
      font-size:23px;
      line-height: 18px;
      width: 320px;
      margin: auto;
      padding-top: 5px;

    }




    #infografia_a31 .titular_info{
      padding-top: 20px;
      padding-bottom: 10px;
      font-size: 18px;
      line-height: 17px;
    }
    #infografia_a31 .contenido_info{
        font-size: 14px;
        line-height: 15px;
    }





    #infografia_a31  .texto_svg_subtitular{
      font-family:HelveticaNeue,Helvetica,sans-serif;
      font-size: 16px;
    }

    
    #infografia_a31  #cont_laboral{
      position: absolute;
      top: 1563px;
      width: 100%;
    }
    #infografia_a31  #cont_laboral .txt_laboral{
      font-family:HelveticaNeue,Helvetica,sans-serif;
      font-size: 21px;
      color: #244E12;
      width: 290px;
      
    }

    #infografia_a31  #cont_laboral #txt_laboral_2{
      top: 130px;
    }
    #infografia_a31  #cont_laboral #txt_laboral_3{
      position: absolute;
      width: 290px;
      top: 165px;
      margin: auto;
      line-height: 12px;
    }
    
    #infografia_a31  #cont_laboral .caja_redondeada{
      box-sizing: border-box;
      height: 203px;
      width: 290px;
      border: 1px dashed #C2CFAC;
      border-radius: 15px;
      margin: auto;
    }


    #infografia_a31 #a31_trigger_area0{
      width: 20px;
      height: 20px;
      background-color: #ff0000;
      position: absolute;
      top: 94px;
    }
    #infografia_a31 #a31_trigger_area1{
      width: 20px;
      height: 20px;
      background-color: #ff0000;
      position: absolute;
      top: 450px;
    }
    #infografia_a31 #a31_trigger_area2{
      width: 20px;
      height: 20px;
      background-color: #ff0000;
      position: absolute;
      top:900px;
    }
    /*
    #infografia_a31 #a31_trigger_area3{
      width: 20px;
      height: 20px;
        background-color: #ff0000;
        position: absolute;
        top: 622px;
    }
    #infografia_a31 #a31_trigger_area4{
      width: 20px;
      height: 20px;
        background-color: #ff0000;
        position: absolute;
        top: 778px;
    }
    #infografia_a31 #a31_trigger_area5{
      width: 20px;
      height: 20px;
        background-color: #ff0000;
        position: absolute;
        top: 988px;
    }
    #infografia_a31 #a31_trigger_area6{
      width: 20px;
      height: 20px;
        background-color: #ff0000;
        position: absolute;
        top: 1154px;
    }
    #infografia_a31 #a31_trigger_area7{
      width: 20px;
      height: 20px;
        background-color: #ff0000;
        position: absolute;
        top: 1312px;
    }
    #infografia_a31 #a31_trigger_area8{
      width: 20px;
      height: 20px;
        background-color: #ff0000;
        position: absolute;
        top: 1468px;
    }
    #infografia_a31 #a31_trigger_area9{
      width: 20px;
      height: 20px;
        background-color: #ff0000;
        position: absolute;
        top: 1650px;
    }
*/

    #infografia_a31  #fuente{

      top: 480px;
    }




    #infografia_a31 #caja_1{
      left:213px;
      top: 174px;
      width: 159px;
      height: 117px;

    }

    #infografia_a31 #caja_2{
      left:372px;
      top: 174px;
      width: 161px;
      height: 117px;

      border-left-style: solid;
      border-left-color: #cdcdb8;
      border-left-width: 2px;
    }
    
    #infografia_a31 #caja_3{
      position: absolute;
      left: 372px;
      top: 291px;
      width: 161px;
      height: 141px;

      border-top-style: solid;
      border-top-color: #cdcdb8;
      border-top-width: 2px;

      

    }

    #infografia_a31 #caja_4{
      left:213px;
      top: 291px;
      width: 159px;
      height: 141px;

      border-top-style: solid;
      border-top-color: #cdcdb8;
      border-top-width: 2px;

      border-left-style: none;


    }

    #infografia_a31 .imagen_caja{
      margin-top: 12px;
    }
    #infografia_a31 .imagen_caja img{
      height: 55px;
      width: 55px;
      
    }
    #infografia_a31 .texto_caja{
      font-family:HelveticaNeueLT-W05-57-Cond,Helvetica,sans-serif;
      font-size: 12px;
      line-height: 14px;
      color: #505050;
      padding-top: 10px;
      padding-left: 15px;
      padding-right: 15px;
    }
}





  /* AÑADIMOS TIEMPOS DE ANIMACION A animate.css */
  .animated.delay-0-1s {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
  .animated.delay-0-2s {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  .animated.delay-0-3s {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }
  .animated.delay-0-4s {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }
  .animated.delay-0-5s {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
  }
  .animated.delay-0-6s {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
  }
  .animated.delay-0-7s {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
  }
  .animated.delay-0-8s {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
  }
  .animated.delay-0-9s {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
  }
  .animated.delay-1-1s {
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
  }
  .animated.delay-1-2s {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
  }
  .animated.delay-1-3s {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
  }
  .animated.delay-1-4s {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
  }
  .animated.delay-1-5s {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
  }
  .animated.delay-1-6s {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
  }
  .animated.delay-1-7s {
    -webkit-animation-delay: 1.7s;
    animation-delay: 1.7s;
  }
  .animated.delay-1-8s {
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
  }
  .animated.delay-1-9s {
    -webkit-animation-delay: 1.9s;
    animation-delay: 1.9s;
  }
  .animated.delay-2-2s {
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
  }
  .animated.delay-2-4s {
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
  }
  .animated.delay-2-5s {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
  }
  .animated.delay-2-6s {
    -webkit-animation-delay: 2.6s;
    animation-delay: 2.6s;
  }
  .animated.delay-2-8s {
    -webkit-animation-delay: 2.8s;
    animation-delay: 2.8s;
  }
  
  .animated.delay-3-2s {
    -webkit-animation-delay: 3.2s;
    animation-delay: 3.2s;
  }
  .animated.delay-3-4s {
    -webkit-animation-delay: 3.4s;
    animation-delay: 3.4s;
  }
  .animated.delay-3-5s {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
  }
  .animated.delay-3-6s {
    -webkit-animation-delay: 3.6s;
    animation-delay: 3.6s;
  }
  .animated.delay-3-8s {
    -webkit-animation-delay: 3.8s;
    animation-delay: 3.8s;
  }
  .animated.delay-4-2s {
    -webkit-animation-delay: 4.2s;
    animation-delay: 4.2s;
  }
  .animated.delay-4-4s {
    -webkit-animation-delay: 4.4s;
    animation-delay: 4.4s;
  }
  .animated.delay-4-5s {
    -webkit-animation-delay: 4.5s;
    animation-delay: 4.5s;
  }
  .animated.delay-4-6s {
    -webkit-animation-delay: 4.6s;
    animation-delay: 4.6s;
  }
  .animated.delay-4-8s {
    -webkit-animation-delay: 4.8s;
    animation-delay: 4.8s;
  }
  
  .animated.delay-5-2s {
    -webkit-animation-delay: 5.2s;
    animation-delay: 5.2s;
  }
  .animated.delay-5-4s {
    -webkit-animation-delay: 5.4s;
    animation-delay: 5.4s;
  }
  .animated.delay-5-5s {
    -webkit-animation-delay: 5.5s;
    animation-delay: 5.5s;
  }
  .animated.delay-5-6s {
    -webkit-animation-delay: 5.6s;
    animation-delay: 5.6s;
  }
  .animated.delay-5-8s {
    -webkit-animation-delay: 5.8s;
    animation-delay: 5.8s;
  }
  
  
  .animated.delay-6s {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
  }
  .animated.delay-6-2s {
    -webkit-animation-delay: 6.2s;
    animation-delay: 6.2s;
  }
  .animated.delay-6-4s {
    -webkit-animation-delay: 6.4s;
    animation-delay: 6.4s;
  }
  .animated.delay-6-5s {
    -webkit-animation-delay: 6.5s;
    animation-delay: 6.5s;
  }
  .animated.delay-6-6s {
    -webkit-animation-delay: 6.6s;
    animation-delay: 6.6s;
  }
  .animated.delay-6-8s {
    -webkit-animation-delay: 6.8s;
    animation-delay: 6.8s;
  }
  
  
  .animated.delay-7s {
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
  }
  .animated.delay-7-2s {
    -webkit-animation-delay: 7.2s;
    animation-delay: 7.2s;
  }
  .animated.delay-7-4s {
    -webkit-animation-delay: 7.4s;
    animation-delay: 7.4s;
  }
  .animated.delay-7-5s {
    -webkit-animation-delay: 7.5s;
    animation-delay: 7.5s;
  }
  .animated.delay-7-6s {
    -webkit-animation-delay: 7.6s;
    animation-delay: 7.6s;
  }
  .animated.delay-7-8s {
    -webkit-animation-delay: 7.8s;
    animation-delay: 7.8s;
  }
  
  
  .animated.delay-8s {
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
  }
  .animated.delay-8-2s {
    -webkit-animation-delay: 8.2s;
    animation-delay: 8.2s;
  }
  .animated.delay-8-4s {
    -webkit-animation-delay: 8.4s;
    animation-delay: 8.4s;
  }
  .animated.delay-8-5s {
    -webkit-animation-delay: 8.5s;
    animation-delay: 8.5s;
  }
  .animated.delay-8-6s {
    -webkit-animation-delay: 8.6s;
    animation-delay: 8.6s;
  }
  .animated.delay-8-8s {
    -webkit-animation-delay: 8.8s;
    animation-delay: 8.8s;
  }
  
  
  
  .animated.delay-8s {
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
  }
  .animated.delay-8-5s {
    -webkit-animation-delay: 8.5s;
    animation-delay: 8.5s;
  }
  
  .animated.delay-9s {
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
  }
  .animated.delay-10s {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
  }