@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmSU5fBBc9.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype');
}
@font-face {
  font-family: 'Racing Sans One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Racing Sans One'), local('RacingSansOne-Regular'), url(https://fonts.gstatic.com/s/racingsansone/v6/sykr-yRtm7EvTrXNxkv5jfKKyDCAKHDi.ttf) format('truetype');
}
body {
  font-color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}
h2 {
  font-family: 'Racing Sans One', cursive;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px 0;
}
p {
  line-height: 1.5em;
  margin-bottom: 1em;
}
header,
footer {
  background-color: #666;
}
header {
  border-bottom: 4px solid #003f94;
  padding: 20px 0 0 0;
}
header .logo {
  margin-bottom: -22px;
}
#main-content {
  background-color: #fff;
  padding: 40px 0;
}
#featured {
  background: #003f94;
  border-bottom: 2px solid #fff;
  border-top: 2px solid #fff;
  color: #fff;
  outline: 20px solid #003f94;
  margin-top: 20px;
  padding: 20px 0;
}
#featured .servicing {
  border-bottom: 1px solid #0059d1;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
#featured ul li {
  list-style-position: inside;
  list-style-type: disc;
  margin-bottom: 0.5em;
}
#gallery {
  background-color: #fff;
  padding: 60px 0;
}
#gallery div[class^="col-sm"] {
  margin-bottom: 20px;
}
#testimonials {
  background-color: #ccc;
  padding: 40px 0;
}
#testimonials .submitter {
  color: #666;
  font-style: italic;
}
footer {
  color: #ccc;
  font-size: 14px;
  padding: 20px 0;
}
/* ---------------------------------------------
--------- Breakpoints - Media Queries ----------
--------------------------------------------- */
@media screen and (min-width: 768px) {
  header {
    padding: 30px 0 0 0;
  }
  header .logo {
    margin-bottom: -26px;
  }
  #featured .servicing {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}