@import url('../fonts/fonts.css');
html{
  box-sizing: border-box;

}
table {
  table-layout: fixed;
  margin: 1rem auto;
  width: 90%;
  -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
  -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
  box-shadow: 0px 1px 5px 0px #4a4a4a;
  border-collapse: collapse;
}

th {
  background: #5D94C1;
  color: #fff;
  font-weight: 400;
  padding: .7rem 0;
  border: 3px solid #fff;
  font-size: 1.2rem;
  font-variant: small-caps;
  width: 30%;
  text-align: center;
}

th:last-child {width: 20%; }
tr:nth-child(even) {
  background: #f9f9f9;
}

td {
  padding: .5rem 1rem;
  border-right: 1px solid rgba(0,0,0,.05);
}
td:last-child {
  border-right: 0 none; 
}

.titulo  { 
  font-family: KGHopeForACure; font-size: 200%; text-align: left;
  color: #5D94C1;
  margin-bottom: 1%;
  margin-left: 6%;
}
.titulo:first-child{
  margin-top: 2%;
}
#title {
    font-family: KGHopeForACure;
    font-size: 230%;
    text-align: center;
    margin: 2% auto 0 auto;
    font-weight: bolder;    
}
@media only screen and (max-width:600px) {
  /* Hacer que la tabla ya no se vea como una tabla */
  table, thead, tbody, th, td, tr {     
    display: block; 
    font-size: 100%;
  }  

  /* Se ocultan los títulos de las columnas*/
  thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tr { border: 1px solid #ddd; }
  
  td { 
    /* hacer que los campos se comporten como filas */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 30%; 
  }
  
  td:before { 
    /* Se le agregan los títulos */
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
  }
  
  /* Se ponen los nuevos titulares. En este caso solo serían: trata centro y domi*/
  td:nth-of-type(1):before { content: "Tratam"; }
  td:nth-of-type(2):before { content: "Centro"; }
  td:nth-of-type(3):before { content: "Domici"; }
}