body {
  font-family: 'lato', sans-serif;
}
.container {
  max-width: 1530px;
  
}

h2 {
  font-size: 24px;
  margin: 20px 0;
  text-align: center;
  small {
    font-size: 0.5em;
  }
}

.responsive-table {
  ul, li, p {
	border-radius: 3px;
	display: flex;
	justify-content: left;
	margin-bottom: 25px;
	align-content: center;
	font-size: 12px;
	padding-right:10px;
	padding-left:10px;
  }
  
  .table-header {
    background-color: #4081bd;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
	font-weight: bold;
	align-content: center;
	padding-right:10px;
	padding-left:10px;
  }
  
  .table-row {
    background-color: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
	text-align: left;
	border:2px;
  }
  
  @media all and (max-width: 667px) {
    .table-header {
      display: none;
    }
    .table-row{
      
    }
    li {
      display: block;
    }
    .col {
      
      flex-basis: 100%;
      
    }
    .col {
      display: flex;
      padding: 10px 0;
      &:before {
        color: #6C7A89;
        padding-right: 10px;
        content: attr(data-label);
        flex-basis: 50%;
        text-align: right;
      }
    }
  }
}