/* Grid - should not be changed
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns,
img {
  width: 100%;
  float: left;
  box-sizing: border-box; 
  margin-bottom:1em;
}

img{
  max-width:100%;
}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  }

  .container:after,
  .row:after,
  .u-cf {
    content: "";
    display: table;
    clear: both;
  }

  /* Navigation Bar - should only change colours here
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none; /* Removes bullet points from the navigation */
    margin: 0; /* Set margin to zero */
    margin-bottom:1em; /* Adds a margin bottom of 1em to the navigation */
    padding: 0; /* Set padding to zero */
    overflow: hidden; /* Hide any element that overflows the navigation div */
    background-color: #333; /*Background colour of the navigation bar */
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block; /* Display navigation buttons inline */
    color: #f2f2f2; /* Colour of navigation links */
    text-align: center; /* Alignment of the navigation text */
    padding: 14px 16px; /* Padding around the nav buttons - top/bottom left/right*/
    text-decoration: none; /* Removes underline from under the links */
    transition: 0.3s; /* Transition time for hovering and other interactions */
    font-size: 17px; /* Sets the font size for the navigation text */
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right; /* Responsive hamburger button */
    display: inline-block; /* Responsive hamburger button */
  }
}

/* --- DO NOT CHANGE ANYTHING IN THIS SECTION ---
The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}


  /* Custom CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* ---------- ADDING CUSTOM FONTS TO YOUR WEBSITE ----------
    1) Go to Google Fonts (https://fonts.google.com/)
    2) Find a font you like and select it
    3) Copy the @import code and add it below
    4) Copy the font-family css and add it below into the body css
*/

/* Font import tags - add new fonts and @import here */
@import 'https://fonts.googleapis.com/css?family=Oswald';

/* Body CSS */
body{
  font-family: 'Oswald', sans-serif; /* Text font for the whole website */
}

/* Header section with website title */
header{
  background-color:red; /* Background colour of the header */
  height:75px; /* Height of the header */
  margin:10px 0; /* Margin around the header */
  padding:30px; /* Padding inside the header */
  text-align: center; /* Alignment of header text */
}

/* Class for three boxes */
.box{
  background-color:gray; /* Background colour of the three boxes */
  padding:1.5em;
  min-height:350px; /* Gives the boxes a minimum height */
}

/* Footer section with copyright */
footer{
  background-color:red; /* Background colour of the footer */
  padding:10px; /* Padding inside the footer */
  text-align:center; /* Alignment of the footer text */
}