* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  color: rgb(112,128,144);
  margin: 0;
}

h2 {
  color: black;
}

.wrapper {
  width: 1024px; /* Anything within wrapper is restricted to 1024px wide */
  margin: 0 auto; /* Centres content on page */
}

.clearfix:after { /* Solves the zero height container problem when using float. ie stops the footer floating behind body content */
  display: block;
  content: "";
  clear: both;
}

.nav-main {
  height: 50px;
  line-height: 50px; /* centres text vertically */
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.main,
.sidebar {
  width: 600px;
  float: left;
}

.sidebar {
  width: 424px; /* same as above but positioned to the right */
}

.article {
  padding-left: 12px;
}

.article-1,
.article-2 {
  width: 50%; /* Column two and three take up 50% of their parent, ie the sidebar */
  float: left;
}

.mySlides {
  width: 600px;
  height: 800px;
}

.article-images {
  width: 200px;
  height: 400px;
}

.footer {
  background-color: rgba(179,179,179,.7);
  color: rgb(255,255,255);
  text-align: right;
  height: 100px;
  line-height: 100px;
  padding-right: 10px;
}
