#grafSantiago { width: 100%; height: 600px; }
#grafSantiago a {text-decoration:none;}
#grafSantiago ul {width: 100%; height: 100%; position: relative; overflow: hidden;background: url(i/fondo.jpg) no-repeat;}
#grafSantiago ul li {}
#grafSantiago ul li .titleEvent {position: absolute; top: 0 left: 0; cursor: pointer;}
#grafSantiago ul li .infoBox {
    position: absolute;
    width: 37%;
    height: 83%;
    top: 0;
    bottom: 0;
    opacity:0.9;
    left: 105%;
    -moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;
    padding: 17px;
    transition:left 1s;
	-webkit-transition:left 1s;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    background: #575757; /* Old browsers */
    background: -moz-linear-gradient(top,  #575757 0%, #222222 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#575757), color-stop(100%,#222222)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #575757 0%,#222222 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #575757 0%,#222222 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #575757 0%,#222222 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #575757 0%,#222222 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575757', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
    box-shadow:0 0 30px #000;
    -moz-box-shadow:0 0 30px #000;
    -webkit-box-shadow:0 0 30px #000;
}
#grafSantiago ul li.active .infoBox {left: 63%}
#grafSantiago ul li .infoBox .media {
    padding-top: 62.5%;
    overflow: hidden;
    height: 0;
    position: relative;
    margin-top: 30px;
}
#grafSantiago ul li .infoBox {z-index:99;margin-top: 5px;}
#grafSantiago ul li .infoBox .media img {width: 100%;position: absolute;top: 0;}
#grafSantiago ul li .infoBox .title {font-family: RTVEfontR; color: #fff; font-size: 24px;line-height: 24px;margin: 5px 0px;font-weight:bold;}
#grafSantiago ul li .infoBox .text {color:#fff;font-size:12px;line-height:140%;}
#grafSantiago .more, #grafSantiago .close {position: absolute;font-size:1.3em;height:33px;line-height: 23px;padding-left: 32px;color:#fff;}
#grafSantiago ul li .infoBox .more {bottom:3px;left:202px;background:url(i/mas_info.png) no-repeat;}
#grafSantiago ul li .infoBox .close {top:10px; left:17px;background:url(i/cerrar.png) no-repeat;}
/** POSICIONING ELEMENTS **************************/
/**************************************************/
#grafSantiago ul li.event1 .titleEvent {top: 340px;left:410px;background:url(i/01.png) no-repeat;}
#grafSantiago ul li.event2 .titleEvent {top: 380px;left: 410px;background:url(i/02.png) no-repeat;}
#grafSantiago ul li.event3 .titleEvent {top: 420px;left: 410px;background:url(i/03.png) no-repeat;}
#grafSantiago ul li.event4 .titleEvent {top:393px;left: 807px;background: url(i/04.png) no-repeat right;padding-left: 0;padding-right: 40px;}
#grafSantiago ul li.event5 .titleEvent {top:355px;left: 676px;background: url(i/05.png) no-repeat right;padding-right: 40px;}
#grafSantiago ul li.event6 .titleEvent {top: 248px;left:631px;background:url(i/06.png) no-repeat;}
#grafSantiago ul li.event7 .titleEvent {top: 220px;left:580px;background:url(i/07.png) no-repeat;}
#grafSantiago ul li.event8 .titleEvent {top: 89px;left:265px;background:url(i/08.png) no-repeat;}
#grafSantiago ul li.event9 .titleEvent {top:92px;left:90px;background:url(i/09.png) no-repeat;}
#grafSantiago ul li.event10 .titleEvent {top: 105px;left: 15px;background: url(i/10.png) no-repeat center top;padding-top: 35px;padding-left: 0;line-height: 15px;height: 15px;}
#grafSantiago ul li .titleEvent {height:33px;padding-left: 40px;line-height: 30px;font-weight: bold;font-size: 15px;text-shadow: 1px 1px 1px #fff;}
/**************************************************/