body {
    margin: 0px;
    padding: 0px;
    color: #000;
    font-family: 'Lato', sans-serif;
}

/* Box (for corners & padding) */
.box {
    padding-left: 20px;
    display: grid;
    /* border-radius: 10px; */
}


/* Set up grids... specifics */

/*  #### Grid for Main page #### */


.wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 
        "banner banner banner" 
        "nav nav nav"
        "main main side"
        "footer footer footer";
    
}

.banner {
    grid-area: banner;
}

.nav {
    grid-area: nav;
    background-color: #161b33;  /* dark blue */
    font-size: 150%;
    padding: 20px;
    vertical-align: middle;
}

.main {
    grid-area: main;
    background-color: #474973;  /* purple  */
    color: #f1dac4; 
}

.footer {
    grid-area: footer;
    text-align: right;
    padding: 20px;

}

.side {
    grid-area: side;
    background-color: #161b33;  /* dark blue */
    display: flex;
    flex-direction: column; /* Align items in a column */
    align-items: center; 
    text-align: left; /* Align text to the left */
    padding: 10px;
}

.side img {
  width: 30vw; /* Set the image width */
  margin-bottom: 10px; /* Add margin between image and text */
}

/* image carousel */

.slideshow-container {
  max-width: 700px;
  min-width: 100px;
  position: relative;
  margin: 0 auto; /* center the slideshow-container */
}


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f1dac4;
  font-size: 25px;
  padding: 10px 12px;
  position: relative;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dots{
  text-align: center;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* adjust the alignment of the dots */
.dot {
  margin: 0 5px; /* spacing */
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* behaviour on smaller screens */
@media (max-width: 450px) {
    .wrapper {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "banner"
            "nav"
            "main"
            "side"
            "footer";
    }
}

/*  #### Grid for Navigation area page #### */
@media only screen and (max-width: 750px) {
    .linkwrapper {
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas: 
        "commonsearches topadmin"
        "topsearch topsearch";
        }

    /* Adjust alignment of content on small screens */
    .commonsearches {
        text-align: left;
    }

    .topsearch {
        width: 100%;
        text-align: left;
    }

    .topadmin {
        text-align: right;
    }
}
/* ### Additional div styling (put colours / corners here) */


/* Area colouring... */

/* side, banner and footer background are the same */
.banner, .footer, .side {
    background-color: #0d0C1C;  /* very dark blue */
    color: #f1dac4; /* light purple */
}


/* #### Links Styling  #### */

/* Navigation Links */
a.topnav {font-weight: bold;}
a.topnav:link, a.topnav:visited {color: #007c72;} /*dark teal */
a.topnav:hover {color: #A69CAC; text-decoration: none;} 


/* links in page */
a {font-weight: bold;}
a:link{color: #007c72;} /* dark teal */
a:visited{color: #5b5d92;} /* light purple*/
a:hover{color: #9270ac;}    /* purple */

/* #### Headings / text styling #### */
h1, h2, h3, h4 {
    font-family: 'Ubuntu', sans-serif;
}

.results {
    background-color: #A69CAC;
    border: 1px solid #967AA1;
    border-radius: 5px;
    padding: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.sub_heading {
    font-family: 'Ubuntu', sans-serif;
    color: #593849; /* purple */
    font-weight: bold;
}

/* ### Form / Search  Styling #### */

form {
    width: 100%;
}

.search {
    background:#F1DAC4;
    width: 75%;
}

.submit::-moz-focus-inner { 
    border: 0;
}


.submit {
    font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    position:relative;
    width: 45px;
    font-size: 14px;
    
    left:-5px;
    background-color: #A69CAC; 
    color:#F1DAC4;
    border: 1px solid #1B2237;
    border-radius: 0 5px 5px 0;   
    display: inline-block;
    padding: 10px;
}


input[type="submit"]:hover {
    background-color: #000;
}


input {
    font-size: 14px;
    padding: 10px;
    display: inline-block;
    border: 1px solid #000;
    box-sizing: border-box; 
}


.quicksearch {
    border-radius: 5px 0 0 5px; 
    display: inline-block;
}