.secBox {text-align:center;}
.cell{padding:0;}

.graphBox {width: 100%;padding-top: 74.5614%;position:relative;}
.graphBox > ul {position:absolute;top:0;left:0;width:100%;height:100%;}
.graphBox h3 {padding-left: 0.5rem;line-height: 2;}
.graphBox h3 span, .graphBox h4{clip:rect(0,0,0,0);position:absolute;top:0;left:0;overflow:hidden;width: 100%;}
.graphBox h3 strong {font-size: 220%;color: #494847;font-weight: 500;}
.graphBox .bel h3 , .graphBox .fra h3 {}
.graphBox .bel h3 strong, .graphBox .fra h3 strong {font-size: 160%;line-height: 2.5;}
.graphBox .viv h3, .graphBox .viv h3 {padding: 12.75% 0 0.75% 0;}
.graphBox .viv h3 strong, .graphBox .ate h3 strong{font-size:180%;font-weight: 800;}
.graphBox .header {text-align:center;position:relative;}
.graphBox .header > * {position:relative;display:inline-block;vertical-align: middle;}
.graphBox .header img {width:2.5rem;height:1.7rem;}
.graphBox .bel .header .flag {background: url("/css/rtve.2015.noticias/rtve.especiales/atentados-bruselas/i/infografia/bruselas.png") no-repeat center top;; }
.graphBox .fra .header .flag {background: url("/css/rtve.2015.noticias/rtve.especiales/atentados-bruselas/i/infografia/paris.png") no-repeat center top;; }

.graphBox > ul > li {display:inline-block;vertical-align:top;margin-left: -2px;}
.graphBox .bel {width:28.59649%;text-align: center;}
.graphBox .viv {width:35.61404%;text-align: center;}
.graphBox .fra {width: 35.87847%;padding: 0 2.45614035%;text-align:center;}

.graphBox .chipBox {position:relative;z-index: 1;display: block;}
.graphBox .chipBox .ico {cursor:pointer;position:relative;}
.graphBox .avat {border-radius: 10em;overflow: hidden;border-width: 0.6rem;border-style:solid;z-index: 2;}
.graphBox .bel .avat {width: 34.6%;margin: 4.75% 0;}
.graphBox .bus .avat {border-color:#e17769;}
.graphBox .det .avat {border-color:#74a7c4;}
.graphBox .mue .avat {border-color:#9fa0a2;}

.graphBox .fra .chipBox {width: 23.79603399433428%;float: right;margin: 6.082153% 4.53257790368272% 7.082153% 4.53257790368272%;}
.graphBox .fra .chipBox .avat{border-width: 0.3rem;}
.graphBox .fra li:first-child .chipBox {margin-left: 68.271954%;width: 31.7280453%;margin-top: 0;margin-bottom: 6.3%;}
.graphBox .fra li:first-child .avat {border-width: 0.6rem;}
.graphBox .fra li:nth-child(11) .chipBox, .graphBox .fra li:nth-child(12) .chipBox, 
.graphBox .fra li:nth-child(13) .chipBox, .graphBox .fra li:nth-child(14) .chipBox {width:17.56373937677054%;margin: 11.082153% 4.532578% 0 2.532578%;}
.graphBox .fra li:nth-child(12) .chipBox {margin-left:50%;}
.graphBox .avat:after {content:"";opacity: 0.9;}
.graphBox.ini .avat:after{opacity:0.2;} 
.graphBox .avat:hover:after {opacity:0;}
.graphBox .backIma {opacity:0;}
.graphBox .avat:after, .graphBox .backIma {position:absolute;top:0;left:0;width:100%;height:100%;}
.graphBox .bus .avat:after, .graphBox .legend li:first-child em {background:#e17769;}
.graphBox .det .avat:after, .graphBox .legend li:nth-child(2) em {background:#74a7c4;}
.graphBox .mue .avat:after, .graphBox .legend li:last-child em {background:#9fa0a2;}

.graphBox .ate {width:100%;text-align: center;margin-top: -12%;}
.graphBox .ate h3 {text-align:center;padding-right: 8%;}
.graphBox .ate h4 {clip:auto;position: relative;width: 71%;margin: 0 auto;overflow: visible;}
.graphBox h4 span {font-size: 150%;color: #494847;font-weight: 400;}
.graphBox .selected h4 span, .graphBox .active h4 span{font-weight: 700;}
.graphBox .bus h4 span {color:#e17769;}
.graphBox .det h4 span {color:#74a7c4;}
.graphBox .mue h4 span {color:#9fa0a2;}

.graphBox .ate ul {width: 55%;}
.graphBox .ate li .chipBox{width: 20%;float: left;display: block;text-align: center;left: 35%;}
.graphBox .chipBox .site {margin: 16% 0;display: inline-block;width: 20%;padding-top: 29.2%;background: url("/css/rtve.2015.noticias/rtve.especiales/atentados-bruselas/i/infografia/atentado.png") no-repeat center top;opacity: 0.5;background-size: 100% auto;}
.graphBox .chipBox .site:hover, .graphBox .selected .chipBox .site{opacity:1;}
.graphBox .chipBox .site img {position:absolute;width:100%;height:100%;}
.graphBox .selected .chipBox .site, .graphBox .active .chipBox .site{background: url("/css/rtve.2015.noticias/rtve.especiales/atentados-bruselas/i/infografia/atentado02.png") no-repeat center top;opacity: 1;background-size:100% auto; }
.graphBox img, .graphBox .backIma img {width:100%;height:auto;}
.graphBox .viv .home {width:14.285714%;margin-bottom: 22.5%;opacity: 0.5;}
.graphBox .viv .home:hover{opacity:1;}
.graphBox .viv h4{clip: auto;top: 45%;width: 35%;left: 32.5%;}
.graphBox .viv span{}

.graphBox .backIma {z-index: 0;}
 
#t01 {padding-top: 7%;}

.graphBox .legend {position:absolute;bottom:0;}
.graphBox .legend li{position:relative;display: inline-block;}
.graphBox .legend span, .graphBox .fuente span{font-size:140%;color:#494847;font-weight:500;padding: 0 3rem 0 0.5rem;}
.graphBox .fuente {position: absolute;right: 0;bottom: 0;}
.graphBox .legend li > * {vertical-align:middle;display: inline-block; }
.graphBox .legend li em {width: 1.8rem;height: 1.8rem;border-radius:100%;vertical-align: bottom;}
.graphBox .legend li:first-child em {}
.graphBox .legend li:nth-child(2) em {}
.graphBox .legend li:last-child em {}

img[src*="("], img[src=""]{display: none;}


/* ELEMENTOS SELECCIONADOS o ACTIVOS*/
.graphBox .selected .backIma, .graphBox .viv .selected .home:hover, .graphBox .viv .selected .home, .graphBox .viv .active .home {opacity:1;transition: all ease 1.3s;}


.graphBox .bel .selected h4 {clip:auto;top: auto;bottom: 0;}
.graphBox .active .avat:after, .graphBox .selected .avat:after{opacity:0;}
.graphBox .fra .selected h4 {clip: auto;top: auto;overflow: visible;}
.graphBox .fra #t12.selected h4, .graphBox .fra #t13.selected h4, .graphBox .fra #t14.selected h4 {top:auto;bottom:100%;}

.graphBox .panel {position: absolute;width: 100%;height: 100%;background: #fff;top: 0;z-index: 2;/* background: url("http://design.rtve.int/infografias/atentados-paris-bruselas/material/pantalla_intro.jpg") no-repeat center center; */}
.graphBox .panel > div {width:70%;margin:0 auto;padding-top: 6%;text-align: center;}
.graphBox .panel .secBox {padding: 12% 0 7% 0;background: url("/css/rtve.2015.noticias/rtve.especiales/atentados-bruselas/i/infografia/casitas.png") no-repeat center top;position: relative;}
.graphBox .panel .secBox:before {content:"";border-bottom:2px solid #D9B05E;width: 40%;left:30%;bottom: 7%;position:absolute;}
.graphBox .panel .secBox > span {text-transform: uppercase;font-size: 400%;color: #737478;padding: 0 15%;display: block;font-weight: 500;}
.graphBox .panel p {font-size: 220%;padding: 2rem;line-height: 1.3;color: #494847;text-align: center;}
.graphBox .panel .boton {cursor:pointer;border: 2px solid #D9B05E;margin: 0 auto;padding: 0rem 7rem;display: inline-block;line-height: 2;margin-top: 5%;}
.graphBox .panel .boton:hover {background: #D9B05E;transition:all ease 0.3s;}
.graphBox .panel .boton:hover strong{color: #fff;}

.graphBox .panel .boton strong {color:#D9B05E;font-size: 240%;font-weight: 500;}
.graphBox .ico img {background:none;display: block;}

.graphBox.ini #t01 .chipBox .ico {    background: url("/css/rtve.2015.noticias/rtve.especiales/atentados-bruselas/i/infografia/yihadista01.png") no-repeat center center;}
.graphBox.ini #t01 .chipBox .ico img{opacity:0;}

/* FUEGOS ARTIFICIALES */
.graphBox .animation .chipBox {-webkit-animation-name: pulse;
    animation-name: pulse;
        -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

 

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  25% {
    -webkit-transform: scale3d(1.15, 1.15, 1.15);
    transform: scale3d(1.15, 1.15, 1.15)
  }

  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1)
  }
  75% {
    -webkit-transform: scale3d(1.13, 1.13, 1.13);
    transform: scale3d(1.13, 1.13, 1.13)
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  25% {
    -webkit-transform: scale3d(1.15, 1.15, 1.15);
    transform: scale3d(1.15, 1.15, 1.15)
  }

  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1)
  }
  75% {
    -webkit-transform: scale3d(1.13, 1.13, 1.13);
    transform: scale3d(1.13, 1.13, 1.13)
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  animation-
}


.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
        -webkit-animation-duration: 1s;
    animation-duration: 1s;

}

@media (max-width: 800px) {
  .graphBox{font-size:70%; }
}

@media (max-width: 600px) {
  .graphBox{font-size:52.63%; }
}

@media (max-width: 400px) {
  .graphBox{font-size:35%; }
}


.no-js {display: none;}