/* categoria */

.categoria {
background:#efefef;
padding:50px 0px;
}

.categoria .tabla {
float:left;
width:calc(100% - 2px);
min-height:200px;	
background:#fff;
border:1px solid #c5c5c5;
border-bottom:5px solid #c5c5c5;
margin-bottom:20px;
}

.categoria .tabla .cabecera {
float:left;
width:calc(100% - 20px);
padding:20px 10px;
}
#conexion-de-paso.cabecera {
background:#ecf15d;	
background: #0077c0;
}
#conexion-a-tierra.cabecera {
background:#88da9a;	
background: #0077c0;
}
.data table tr:nth-of-type(even) {
background: #fdffb8;
background: #83bde0;
background: rgba(0,119,192,.3)!important;
background: rgb(239, 239, 239)!important
}
#conexion-a-tierra .data table tr:nth-of-type(even) {
background: #c0f1cb;
}

.categoria .tabla .cabecera h1 {
float:left;
font-size:22px;
color:#fff;
font-weight:600;
/*
background:url(../img/plug.jpg) no-repeat center left;
*/
padding-left: 50px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
text-transform: uppercase;
/* margin: 35px 0px 35px 0px; */
/* text-shadow: 0px 0px 10px #000000; */
}

.categoria .tabla .cabecera a {
float:right;
font-size:16px;
color:#000000;
font-weight:600;
margin-top:6px;
}

.categoria .left a {
float:left;
width:23px;
height:19px;
text-indent:-9999999px;
margin:5px 7px;
}

.categoria .left h1 {
float:left;
width:auto;
margin:0px auto;
padding:0px;
color:#666666;
font-size:14px;
font-weight:300;
text-transform:none;
margin:7px 10px 20px 0px;
}

.categoria .left a:nth-Child(2) {
background:url(../img/icono-face.svg) no-repeat center left;
}

.categoria .left a:nth-Child(3) {
background:url(../img/icono-twitter.svg) no-repeat center left;
}

.categoria .left a:nth-Child(4) {
background:url(../img/mail2.svg) no-repeat center left;
}

.categoria .right a {
float:right;
color:#bababa;
font-size:14px;
font-weight:300;
text-decoration:none;
padding:12px 0px 12px 60px;
margin:0px auto;
margin:-5px 0px 15px 0px;
}

.categoria .right a:hover {
color:#0077c0;
text-decoration:underline;
}

.categoria .right a:nth-Child(1) {
background:url(../img/icono-pdf2.svg) no-repeat center left;
margin-left:15px;
}

.categoria .data {
float:left;
width:100%;
overflow-x:auto;
}

.categoria .data table {
float:left;
width:100%;
padding:0px;
margin:0px;
}

.categoria .data table th {
font-size:13px;
text-transform:uppercase;
font-weight:600;
padding:30px 5px;
text-align:center;
}

.categoria .data table td {
font-size:12px;
font-size:.85em;
text-transform:uppercase;
font-weight:300;
padding:0px 5px;
text-align:center;
}
.categoria .data table td img {
width: 160px;
height: 120px;
}
.categoria .data table td a {
color:#000;
text-decoration:none;
font-weight:600;
text-transform:none;
}

.categoria .data table td a:hover {
text-decoration:underline;
}


@media
only screen 
and (max-width: 760px), (min-device-width: 768px) 
and (max-device-width: 1024px)  {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
.categoria .data table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

.categoria .data table tr {
margin: 0 0 0rem 0;
}

.categoria .data table tr:nth-child(odd) {
background: #eee;
}

.categoria .data table td {
/* Behave  like a "row" */
 
border-bottom: 1px solid #ccc;
position: relative;
padding-left: 50%;
}

.categoria .data table td:last-of-type {
border-bottom: 1px solid #ccc;
}

.categoria .data table tr:nth-child(odd) {
background: #fff;
padding: 0px 0px;
}

.categoria .data table td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
width:0px;
padding-right: 10px;
padding-top: 8px;
white-space: nowrap;
}

.categoria .data table td {
text-align: right;
}

.categoria .data table td {
padding: 8px 5px;
}
/*
Label the data
You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
*/
.categoria .data table td:nth-of-type(1):before { content: "Modelo"; }
.categoria .data table td:nth-of-type(2):before { content: "Aspecto/ Imagen"; }
.categoria .data table td:nth-of-type(3):before { content: "Especificaciones"; }
.categoria .data table td:nth-of-type(4):before { content: "Sección Conductor"; }
.categoria .data table td:nth-of-type(5):before { content: "Voltaje Admitido"; }
.categoria .data table td:nth-of-type(6):before { content: "Corriente Máxima"; }
.categoria .data table td:nth-of-type(7):before { content: "Detalles"; }

}