html {
    background-image: url("images/backgroundimage-edited.jpg"); /*Link to background image*/
    background-size: 100%; /*Fits background image to screen size*/
    background-repeat: no-repeat; /*Means that the background will not be repeated*/
}
body {
    width: 1000px; 
    margin: auto; /*Horizontally center's the body so there is an equal amount of white space*/
    padding: 50px 0 50px 0; /*Vertically center's the body so there is an equal amount of white space*/
}
#nav { /*Nav bar container*/
    height: 100px;
}
#nav ul { /*The whole nav bar*/
    list-style-type: none; /*Removes bullet points from list items*/
    margin: 0; /*Removes browser default settings*/
    padding: 0; /*Removes browser default settings*/
    display: flex; /*Allows content inside container to be flexible*/
    justify-content: space-between; /*Equal white space between the boxes*/
}
#nav li { /*Each list item*/
    width: 150px; /*Gives each list item an equal box width*/
    height: 50px;
    background-color: #CCCCCC; /*Adds a grey background to the nav bar boxes*/
    margin: 20px 0 20px 0; /*Allows the nav bar items to be vertically centered against the logo*/
    border: 3px solid black; /*Adds a border to the nav bar boxes*/
    text-align: center; /*Center's text in nav boxes*/
}
#nav li a { /*The links themselves*/
    height: 100%;
    display: block; /*Allows the whole box for each list item to be clicked - not just the text*/
    font: 25px 'Palanquin', sans-serif; /*Changes the nav bar's font and size*/
    color: black;
    text-decoration: none; /*Removes link underline from nav bar*/
}
#nav li .active { /*When the list item is active*/
    background-color: #999999; /*When a page is active it tells the viewer which page they are on by a darker box colour*/
}
#logo { /*Company name, not a list item*/
    font: 35px 'Alfa Slab One', cursive; /*Makes the logo stand out with a bigger font size and different font*/
    color: black;
    background-color: #CCCCCC;
    border: 3px solid black;
    align-self: center; /*Center's logo and auto adjusts size*/
    padding: 10px; /*Allows the logo to be bigger than the nav bar list items*/
}
/* HOME PAGE */
#descriptiontextbox { /*Textbox for the description of the business*/
    background-color: #CCCCCC; /*Gives the textbox a grey background*/
    border: 3px solid black; /*Adds a border to the perimeter of the textbox*/
    display: table; /*Allows text to vertically align*/
}
#description { /*Brief desciption of the business*/
    font: 30px 'Palanquin', sans-serif;
    color: black;
    text-align: center; /*Allows text to center horizontally*/
    display: table-cell; /*Allows text to center vertically*/
    width: 1000px;
}
#homeimage { /*The container for the home image*/
    border: 3px solid black; /*Adds a border to the perimeter of the image*/
    height: 445px;
    margin-top: 5px; /*Adds 5px of white space between the home image and textbox*/
    background-color: #CCCCCC; /*If the image doesn't load for any reason then the background colour will display*/
}
#homeimage img { /*The home image*/
    width: 100%; /*Allows the image to fit into the container #homeimage*/
    height: 100%;
}
/* OUR WORK PAGE */
#slideshow { /*Slideshow container*/
    position: relative; /*Positions caption in the center of the bottom of the slideshow*/
    background-color: #CCCCCC; /*Ensures that the wooden background image is not seen when changing slides*/
    border: 3px solid black;
    height: 510px;
}
#slideshow img { /*Slideshow images*/
    width: 100%; /*Allows the images to fill the slideshow container*/
    height: 510px;
}
#previous, 
#next { /*The arrows to change slides*/
    cursor: pointer; /*Makes the cursor a pointer when hovering/clicking on the buttons*/
    position: absolute; /*Allows buttons to be placed on the image*/
    top: 50%; /*Places buttons on the middle sides of the images*/
    margin-top: -20px; /*Center's buttons*/
    padding: 20px; /*Moves buttons 20px in from the edge of the container*/
    color: white;
    font: 20px bold; /*Makes the arrows easily visible for the target audience*/
    border-radius: 0 5px 5px 0; /*Rounds outside edges of buttons*/
    transition: 0.5s ease; /*When cursor moves off button, the button background fades out, giving a softer look*/
}
#next { /*Right-hand side arrow*/
    right: 0; /*Allows arrow/button to sit on the right hand side of the slide*/
    border-radius: 5px 0 0 5px; /*Makes the outside edges of the button round*/
}
#previous:hover,
#next:hover { /*Gives the arrows a background colour when hovered over to let viewers know to click on it*/
    background-color: rgb(0, 0, 0); /*Fallback background colour*/
    background-color: rgba(0, 0, 0, 0.8); /*Less opacity to the background colour to make it look softer*/
}
.caption,
.numbers,
.description { /*Text describing each slide's image and numbers telling the viewer which slide they are on*/
    color: white;
    position: absolute; /*Allows the numbers and caption to sit on top of the slide image*/
    font: 20px 'Palanquin', sans-serif;
    padding: 8px 12px; /*Allows numbers and caption to sit away from the edge of the container/image*/
    text-align: center; /*Allows text to sit in the center of the image*/
}
.caption { /*Text describing each slide's image*/
    font-size: 25px;
    width: 100%; /*Allows caption to sit in the center of the image*/
    bottom: 10px; /*Allows caption to sit 10px up from the bottom of the slide*/
}
.description { /*Description of each image/slide*/
    background-color: rgb(204,204,204);
    background-color: rgba(204, 204, 204, 0.5); /*Adds a grey background with 50% opacity to the description*/
    color: black;
    margin-top: 5px; /*Adds some white space between the slideshow and description*/
}
.fade { /*Allows smooth/faded transition between slides*/
    -webkit-animation-name: fade; /*Webkit allows fade to work on Safari and Google Chrome*/
    -webkit-animation-duration: 1.5s;
    animation-name: fade; /*Specifies a name for the animation*/
    animation-duration: 1.5s; /*The duration that the animation occurs for*/
}
@-webkit-keyframes fade { /*Allows animation fading to work in Google Chrome and Safari*/
    from {opacity: .5}
    to {opacity: 1}
}
@keyframes fade { /*Allows animation fading*/
    from {opacity: .5}
    to {opacity: 1}
}
/* ABOUT US PAGE */
#header {
    background-color: #CCCCCC;
    border: 3px solid black;
    height: 50px;
    display: table; /*Allows text to vertically align*/
}
.text { /*Style for all text on the about us page*/
    font: 29px 'Palanquin', sans-serif;
    color: black;
    text-align: center; /*Allows text to center align/horizontally*/
    display: table-cell; /*Allows text to center vertically*/
    vertical-align: middle; /*Vertically centers text*/
    width: 1000px;
}
#boxcontainer { /*Container for all 3 boxes*/
    height: 100%;
    width: 100%;
    display: flex; /*Allows content inside container to be flexible*/
    justify-content: space-between; /*Equal white space between the boxes*/
    margin-top: 10px; /*Adds 10px white space between header and boxes*/
}
.boxes { /*Class for all 3 boxes*/
    height: 445px;
    width: 320px;
    background-color: #CCCCCC;
    border: 3px solid black;
    display: table;/*Allows any text inside the boxes to vertically align*/ /*FIX, DISPLAY:TABLE MAKES BOXES OVERSIZE WHEN LOADING/REFRESHED*/
}
.boxes img { /*images inside .boxes*/
    width: 100%;
    height: 100%; /*100% height and witdth fills the container with the image*/
}
/* CONTACT US PAGE */
#contactuscontainer { /*Container for the textbox and map*/
    float: left; /*Allows #detailstextbox and #map to sit next to each other*/
    display: flex; /*Allows content inside container to be flexible*/
    justify-content: space-between; /*Equal white space between the boxes*/
    margin-top: 10px; /*Adds 10px white space between header and boxes*/
    width: 995px;
}
#detailstextbox { /*Contact details textbox*/
    background-color: #CCCCCC;
    border: 3px solid black;
    width: 490px;
    height: 510px;
    display: table; /*Allows text inside the textbox to be centered vertically*/
}
#details { /*Contact details text*/
    color: black;
    font: 30px 'Palanquin', sans-serif;
    text-align: center; /*Allows text to center horizontally*/
    display: table-cell; /*Allows text to center vertically*/
    vertical-align: middle; /*Vertically centers text*/
}
#map iframe { /*Map of Auckland - let's viewers know where Buildable Ltd does their work*/
    width: 490px;
    height: 510px;
    border: 3px solid black; /*Adds a border outside the perimeter of the map*/
    background-color: #CCCCCC; /*If the map doesn't load for any reason or takes a while to load, the background colour will display*/
}