#contenedor-llaves {
width:100%;
}

#llaves-copa-davis {
width:100%;
list-style-type: none;
padding:0px;
background-color: #f6f6f6;
margin:0px;
}

#llaves-copa-davis ul {
list-style-type: none;
padding:0px;
}

#llaves-copa-davis > li {
width:25%;
float:left;
height: auto;
min-height: 400px;
position: relative;
}

#llaves-copa-davis div.fecha {
width:100%;
background-color: #eeeeee;
height: 50px;
display: block;
margin-bottom:10px;
}

#llaves-copa-davis div.fecha h3 {
text-align: center;
font-size: 15px;
margin:0px;
padding:8px 0px 4px;
}

#llaves-copa-davis div.fecha span {
display: block;
font-size: 12px;
font-weight: bold;
color: #666;
text-align: center;
}

#llaves-copa-davis > li ul {
border: 1px solid #ddd;
padding:11px 5%;
width:70%;
margin-left:10%;
margin-bottom:10px;
position: relative;
z-index: 1;
background-color: #fff;
}

#llaves-copa-davis > li ul li {
background-color: #f4f4f4;
font-size: 12px;
font-weight: bold;
height: 20px;
line-height: 20px;
position: relative;
}

#llaves-copa-davis > li ul li:first-child {
margin-bottom:10px;
}

#llaves-copa-davis > li ul li img {
width:30px;
height: 20px;
margin-right:10px;
float:left;
}

#llaves-copa-davis > li ul li span {
position: absolute;
right:0px;
top:0px;
height: 20px;
line-height: 20px;
width:30px;
text-align: center;
}

#llaves-copa-davis li.activo {
background-color: #e3f5c7;
}

#llaves-copa-davis li.activo div.fecha {
background-color: #acda4c;
position: relative;
}

#llaves-copa-davis li.activo div.fecha:after {
content: '';
position: absolute;
bottom:-13px;
left:40%;
left:calc(50% - 14px);
width: 0;
height: 0;
border-style: solid;
border-width: 13px 14px 0 14px;
border-color: #adda4c transparent transparent transparent;
}

div.instruccion {
display: none;
}

/*Llaves*/

#llaves-copa-davis ul[data-match="crcprc"],
#llaves-copa-davis ul[data-match="venesv"] {
margin-top:50px;
}

#llaves-copa-davis ul[data-match="bolper"],
#llaves-copa-davis ul[data-match="mexchl"] {
margin-top:95px;
}

#llaves-copa-davis ul[data-match="ascenso"] {
margin-top:135px;
}

#llaves-copa-davis ul[data-match="vencrc"]:before,
#llaves-copa-davis ul[data-match="bolmex"]:before {
content:'';
height:53px;
width:12%;
width:calc(12% - 1px);
position: absolute;
left:-12%;
top:38px;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
z-index: -1;
}

#llaves-copa-davis ul[data-match="esvprc"]:before,
#llaves-copa-davis ul[data-match="perchl"]:before {
content:'';
height:53px;
width:12%;
width:calc(12% - 1px);
position: absolute;
left:-12%;
top:-15px;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
z-index: -1;
}

#llaves-copa-davis ul[data-match="venesv"]:before,
#llaves-copa-davis ul[data-match="mexchl"]:before {
content:'';
height:1px;
width:15%;
width:calc(15% - 1px);
position: absolute;
left:-15%;
top:38px;
border-top: 1px solid #ccc;
z-index: -1;
}

#llaves-copa-davis ul[data-match="ascenso"]:after {
content:'';
height:1px;
width:11%;
width:calc(11% - 1px);
position: absolute;
left:-11%;
top:38px;
border-top: 1px solid #ccc;
z-index: -1;
}

#llaves-copa-davis ul[data-match="crcprc"]:after,
#llaves-copa-davis ul[data-match="bolper"]:after {
content:'';
height:1px;
width:13%;
width:calc(13% - 1px);
position: absolute;
right:-13%;
top:38px;
border-top: 1px solid #ccc;
z-index: -1;
}

#llaves-copa-davis ul[data-match="vencrc"]:after,
#llaves-copa-davis ul[data-match="bolmex"]:after {
content:'';
height:53px;
width:10%;
width:calc(10% - 1px);
position: absolute;
right:-10%;
top:38px;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
z-index: -1;
}

#llaves-copa-davis ul[data-match="esvprc"]:after,
#llaves-copa-davis ul[data-match="perchl"]:after {
content:'';
height:53px;
width:10%;
width:calc(10% - 1px);
position: absolute;
right:-10%;
top:-15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
z-index: -1;
}

#llaves-copa-davis ul[data-match="venesv"]:after {
content:'';
height:85px;
width:14%;
width:calc(14% - 1px);
position: absolute;
right:-14%;
top:38px;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
z-index: -1;
}

#llaves-copa-davis ul[data-match="mexchl"]:after {
content:'';
height:85px;
width:14%;
width:calc(14% - 1px);
position: absolute;
right:-14%;
top:-47px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
z-index: -1;
}

@media (max-width: 959px) {

#contenedor-llaves {
overflow-x: scroll;
}

div.instruccion {
float:left;
clear:both;
display: block;
width: 100%;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #666;
height: 28px;
line-height: 28px;
background-image: url(../img/swipe_b.png), url(../img/swipe.png);
background-repeat: no-repeat;
background-position: 10px center, right 10px center;
background-size: 24px;
background-color: #efefef;
border-bottom: 1px dotted #ccc;
}

#llaves-copa-davis {
width:200%;
}

}

@media (max-width: 440px) {

#llaves-copa-davis {
width:400%;
}

}