@import url('jugadores-mundial-2018.basics.css');
@import url('alineaciones.desktp.css');

.infoBox .graphBox .imageBox .scnd_ima {display:none;}
.infoBox .graphBox .imageBox {margin-bottom:34rem}

.pinnsBox {width:50%; height:100%; position:absolute; top:0; left:0;margin-left: -1rem}
.pinnsBox.visitante {left:50%; margin-left: 1rem}

/* suplentes + entrenador*/
.imageBox ~ span {display: block;width: 100%;height: 17rem;background:#eeeeee;position: absolute;bottom: 17rem;text-align: center;color: #424242;line-height: 2;font-size: 2.1rem;font-weight:500}
.imageBox ~ span:nth-child(3) {background:#fbfbfb;bottom:0}
.imageBox ~ span:nth-child(2):after, .imageBox ~ span:nth-child(3):after {content:'|'; width:10rem;height:10rem; position:absolute; left:50%; top:3rem;margin-left: -5rem;font-size: 9rem;line-height: 1;font-weight: 100;color: #c3c3c3;text-align: center;}
.pinnsBox .item.ent, .pinnsBox .item.cambio1, .pinnsBox .item.cambio2, .pinnsBox .item.cambio3, .pinnsBox .item.cambio4 {display:block}
.pinnsBox .item.ent .dataBox .head-item .label:first-child {display:none}
.pinnsBox .item:nth-child(n+12)[class*="pos"].C .head-item {padding:0 .9rem}
/* posicionamiento */
.local .cambio1, .local .cambio2, .local .cambio3, .visitante .cambio1, .visitante .cambio2, .visitante .cambio3, .pinnsBox .item.cambio4 {bottom: -15rem;}
.local .ent, .visitante .ent {bottom:-32.5rem;}
.local .cambio1 {left:20%;}
.local .cambio2 {left:40%;}
.local .cambio3, .local .ent {left:60%;}
.visitante .cambio1 {right:20%;left:auto}
.visitante .cambio2 {right:40%;left:auto}
.visitante .cambio3, .visitante .ent {right:60%;left:auto}
.visitante .cambio4 {right:0}

.pinnsBox.RUS .item.pos10.C .head-item .label:last-child {top:4rem}

/*** ficha ***/
/*plegar/desplegar*/
.chipsBox.beoff {width:0;}
.chipsBox.be_on {width:100%;max-width:72rem;top:50%;left:50%;margin-left:-36rem;margin-top:-50rem;}
/* .chipsBox .body-item .texto {max-height:14rem;} */

/*fireworks*/
.chipsBox .item {display:block;clip:rect(0,0,0,0);transform:scale(0,0);-webkit-transform:scale(0,0);box-shadow: 0 2rem 2rem rgba(0,0,0,0.25);}
.chipsBox .item.active {display:block;width:100%;clip:auto;transform: scale(1,1); -webkit-transform:scale(1,1);transition: all ease 1s; -webkit-transition: all ease 1s;}
.chipsBox.beoff .close {opacity:0;}
.chipsBox.be_on .close {opacity:1;transition: all linear 1s; -webkit-transition: all linear 1s;transition-delay:0.6s;-webkit-transition-delay:0.6s;}

.pinnsBox .item:hover {filter:brightness(110%)}
.pinnsBox.local .item:hover .label:first-child {color:#ae0511}
.pinnsBox.visitante .item:hover .label:first-child {color:#165F79}
.pinnsBox .item:nth-child(n+12)[class*="pos"].C:hover .head-item .label:last-child {background:#01aa6f}

/*no js*/
.no-js .chipsBox {column-count:2;-moz-column-count:2;-webkit-column-count:2;column-gap:0;-moz-column-gap:0;-webkit-column-gap:0;column-gap:0;}
.no-js .chipsBox .item {clip:auto;transform: scale(1,1);margin: 2rem;border: solid #ddd;padding: 1rem;max-height: initial;/*width: 46%;*/}
.no-js .chipsBox .item:nth-child(-n+25){float:left; border-color:#7B2433}
.no-js .chipsBox .item:nth-child(n+31){float:right; border-color:#8a8a8a; /*clear:both*/}
.no-js .chipsBox .head-item, .no-js .chipsBox .item .texto {padding:0 1rem}
.no-js .chipsBox.beoff .body-item, .no-js .chipsBox.beoff {width:100%;display:block;position:relative;}
.no-js .chipsBox.beoff .main-item {width:33.333%}

.no-js .imageBox ~ span {top: 9.7%;}
.no-js .imageBox ~ span:nth-child(3) {top: 11.6%;}

.no-js .chipsBox .item[data-contador="25"], .no-js .chipsBox .item[data-contador="26"], .no-js .chipsBox .item[data-contador="27"],
.no-js .chipsBox .item[data-contador="28"], .no-js .chipsBox .item[data-contador="29"], .no-js .chipsBox .item[data-contador="55"],
.no-js .chipsBox .item[data-contador="56"]{display:none}