html, body {
  font-family:'Roboto';
  margin:0;
  padding:0;
}
header {
  padding:25px 0px;
  text-align:center;
}
nav {
  display:flex;
  justify-content:center;
  padding:10px;
}
nav a {
  margin:0px 15px;
  color:#8d0f1b;
  font-size:17px;
}
banner {
  height:300px;
  background:url(top.jpg);
  background-size:cover;
  background-position:50% 50%;
  display:flex;
  justify-content:center;
  align-items:center;
}
banner h2 {
  color:white;
  font-size:23px;
  line-height:40px;
  text-align:center;
  text-shadow:0px 0px 1px rgba(0,0,0,0.5), 0px 0px 2px rgba(0,0,0,0.5), 0px 0px 4px rgba(0,0,0,0.5), 0px 0px 8px rgba(0,0,0,0.5);
  font-weight:700;
}
main {
  width:1000px;
  margin:0 auto 0 auto;
  padding:15px 0;
}
main h2 {
  color:#8d0f1b;
  text-transform:uppercase;
}
main.tc {
  display:flex;
  justify-content:space-between;
}
main.tc article { width:45%; }
section.r {
  color:white;
  background:#8d0f1b;
  margin:30px 0 30px 0;
}
section.g { background:#edeceb; }
footer {
  color:white;
  font-size:12px;
  padding:10px;
  background:#878887;
  text-align:center;
}
@media screen and (max-width: 768px) {
  nav { display:none; }
  main {
    width:auto;
    padding:15px;
  }
  main.tc { display:block; }
  main.tc article { width:auto; }
}