* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/* Body */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  margin: 0; }

/* Header */
header img {
  margin: 1rem 0 0 .5rem; }

/* Nav */
div#navWra {
  background-color: #308FB4; }

nav button {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  padding: .5rem;
  color: white; }

nav ul {
  display: none;
  margin: 0;
  padding: 0;
  border-top: solid 1px white; }

nav ul li {
  list-style-type: none;
  border-bottom: solid 1px white; }

nav ul li a {
  display: block;
  padding: .9rem 2vw;
  text-decoration: none;
  color: white; }

ul li:hover {
  background-color: #123d4e; }

ul.open {
  display: block; }

/* main */
figure.hero {
  margin: .5rem .5rem; }

.hero img {
  width: 100%; }

/* Grid 1 */
.first {
  background-color: black;
  display: grid;
  grid-template-columns: 70% 30%;
  grid-row: auto;
  margin: .5rem .5rem; }

.first figure h2 {
  color: #eeee18; }

.first figure p, ul li {
  color: white; }

.moveright {
  text-align: end; }

/* End Grid 1 */
main h2 {
  padding: 1.5rem .5rem .1rem .5rem;
  margin: 0;
  color: #308FB4; }

/* Grid 2 */
.second {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: solid 1px grey;
  margin: .5rem;
  background-color: whitesmoke; }

.second img {
  width: 100%; }

.second figure {
  margin: .5rem; }

.second h3 {
  color: #308FB4;
  margin-bottom: 0;
  font-size: 20px; }

.second p {
  color: grey;
  margin-top: .5rem; }

/* Grid 3 */
.third {
  display: grid;
  grid-template-columns: 1fr;
  border: solid 1px grey;
  margin: .5rem;
  background-color: whitesmoke; }

.third img {
  width: 100%; }

.second figure {
  margin: .5rem; }

.third h3 {
  color: #308FB4;
  margin-bottom: 0;
  font-size: 20px; }

.third p {
  color: grey;
  margin-top: .5rem; }

.last img {
  width: 100%; }

div.last {
  margin: .5rem; }

/* footer */
footer {
  background-color: #308FB4;
  color: white;
  padding: 10px .5rem; }

footer h4 {
  margin: 0; }

@media only screen and (min-width: 35rem) {
  /* Header */
  header {
    border-bottom: solid 1px grey; }

  /* Nav */
  nav button {
    display: none; }

  div#navWra {
    background-color: white; }

  nav ul {
    display: flex;
    justify-content: right;
    border-top: none; }

  nav ul li {
    border-bottom: none; }

  nav ul li a {
    display: block;
    padding: 1rem 1rem;
    color: grey; }

  ul li:hover {
    background-color: grey; }

  ul li:hover a {
    color: white; }

  /* Main */
  .third {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: solid 1px grey;
    margin: .5rem; }

  .third :nth-child(4) {
    grid-column: 1/ span 2; }
  .third :nth-child(3) {
    grid-row: 1 / span 2;
    grid-column: 3; } }
@media only screen and (min-width: 60rem) {
  /* Nav */
  nav ul li a {
    padding: 1rem 1.5rem; }

  /* Main */
  /* Grid 2 */
  .second {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; } }