body{
     font:15px/1.5 Arial, Helvetica, sans-serif;
     padding: 0;
     margin:0;
     background-color:#f4f4f4 
 }

  /* GLOBAL */
 .container{
     width: 80%;
     /* line below stops text from being harshly alligned to the left of the page */
     margin:auto;
     /* (line below) If content spills over in div, prevents scrollbar */
     overflow:hidden;
 }

 ul{
     padding:0;
     margin:0;
     
 }

 .button-1{
     height:38px;
     background:#e8491d;
     border:0;
     padding-left:20px;
     padding-right:20px;
     color:#fff;
 }

 .dark{
     padding:15px;
     background:#35424a;
     color:#fff;
     margin-top:10px;
     margin-bottom:10px;
 }


 /* Header */
 header{
     background:#35424a;
     color:#fff;
     padding-top:30px;
     min-height:70px;
     border-bottom:#e8491d 3px solid;
 }

 header a{
     color:#fff;
     text-decoration:none;
     text-transform:uppercase;
     font-size:16px;
 }

 header li{
     display:inline;
     padding:0 20px 0 20px;
     box-sizing:border-box;
 }

 header #branding{
     float: left;
 }

 header #branding h1{
     margin:0;
 }

 header nav{
     float:right;
 }

 header .highlight, header .current a{
     color:#e8491d;
     font-weight:bold;
 }

 header a:hover{
     color:#cccccc;
     font-weight: bold;
 }

 #boxes .container .box2 img{
     height:215px;
     width:150px;
 }

 #boxes .container .box3 img{
    height:230px;
    width:170px;
}

/*REPORT*/
.main-title {
    font-size: 40px;
}
.article-pic {
    width: 100%;
}

#main-col p{
    text-align: justify;
    font:15px/1.5 Arial, Helvetica, sans-serif;
}



/* SHOWCASE */
#showcase{
    min-height: 400px;
    background-image: url(../images/showcase.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
    color:#fff;
    
}

#showcase h1{
    margin-top:100px;
    font-size:55px;
    margin-bottom:10px;
    
}
#showcase p{
    font-size:20px;
}

/* NEWSLETTER */
#newsletter{
    padding: 15px;
    color:#fff;
    background:#35424a;
}

#newsletter h1{
    float:left;
}

#newsletter form{
    float:right;
    margin-top:15px;
}

#newsletter input[type="email"]{
    padding:4px;
    height:25px;
    width: 250px;
}

/* BOXES */

#boxes{
    margin-top:20px;
}

#boxes .box{
    float:left;
    width:30%;
    text-align:center;
    padding:10px;
    box-sizing: border-box;
}

#boxes .box img{
    width:90px;
}

/* SIDEBAR */
aside#sidebar{
    float:right;
    width:30%;
    margin-top:10px;
}

aside#sidebar .sign-up input, aside#sidebar .sign-up textarea{
    width:90%;
    padding:5px;
}

/* MAIN ARTICLE */
article#main-col{
    float:left;
    width:65%;
}
/* SERVICES */
ul#references li{
    list-style: none;
    padding:20px;
    border:#ccc solid 1px;
    margin-bottom:5px;
    background:#e5e6e6;
}
/* FOOTER */
footer{
    padding:20px;
    margin-top:0px;
    color:#fff;
    background-color:#e8491d;
    text-align:center;
}

.call-to-action a {
    border: 2px solid white;
    color:#e8491d;
    padding: 10px;
    min-width: 150px;
    display: inline-block;
    border-radius: 6px;
    background-color: white;
    text-decoration: none;
    text-align: center;
}
/*button changes colour when hovered over*/
.call-to-action a:hover{
    border: 2px solid #e8491d;
    color:white;
    background-color:#e8491d;
}

/* MEDIA QUERIES */
/* 768px is usually seen in tablets */
@media(max-width: 768px){
    header #branding, header nav, header nav li, #newsletter h1, #newsletter form, #boxes .box, article#main-col, aside#sidebar{
        float:none;
        text-align:center;
        width:100%;
    }

    header{
        padding-bottom:20px;
    }
    
    #showcase h1{
        margin-top:40px;
        text-align: center;
    }

    #showcase p{
        text-align: center;
    }

    #newsletter button, .sign-up button{
        display:block;
        width:100%;
    }

    #newsletter form input[type="email"], .sign-up input, .sign-up textarea{
        width:100%;
        margin-bottom:10px;
    }
}