body{

  background-color:#ffffff!important;
  color: #ffffff !important;
  line-height:1.6;
  font-family: sans-serif;
  background-image: url(../images/TownHallManchester.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: fixed;
    overflow: auto;
}


@media screen and (min-width: 780px) {
  body{

    background-color:#7FBCAA !important;
    color: #ffffff;
    line-height:1.6;
    font-family: sans-serif;
    background-image: url(../images/TownHallManchester.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
    overflow: auto;
  }
}

@media screen and (min-width: 1400px) {
  body{

    background-color:#ffffff !important;
    color: #ffffff;
    line-height:1.6;
    font-family: sans-serif;
    background-image: url(../images/TownHallManchester.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
    overflow: auto;
  }
}

.container {
	border-style: solid;
	border-color: #1c3c89 ;

	margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(5 20%);
    grid-template-rows: 1fr;
    grid-auto-rows: minmax(60px, auto);
    /**/
    grid-template-areas:
        "logo logo logo logo logo"
        "commentary commentary commentary commentary commentary"
        "controls controls controls controls controls"

    }

    .container{
      background-color:#1c3c89;
      max-width: 500px;
      padding: 0.5em;
      border-radius: 15px 15px 15px 15px;
    }


@media screen and (min-width: 780px) {
    .container {
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(5 20%);
        grid-template-rows: 1fr;
        grid-auto-rows: minmax(60px, auto);
        /**/
        grid-template-areas:
            "logo logo logo logo logo"
            "commentary commentary commentary commentary commentary"
            "controls controls controls controls controls"
    }
}

.logo{
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  width: auto;
  height: 200px;
  grid-area: logo;
}

.address{
  outline-color: #ffffff;
  outline-width: medium;
  outline-style: solid;
  padding-left: 0.5em;

  grid-area: address;
  text-align: left;
}

.docs{
  outline-color: #ffffff;
  outline-width: medium;
  outline-style: solid;
  padding: 0.5em;

  grid-area: docs;
  text-align: center;
}

.commentary {
    padding: .5em;
    grid-area: commentary;
    text-align: left;
    /*opacity: 1;*/
}

.controls{
  padding: 0.5em;

  grid-area: controls;
  text-align: center;
}

.nav {
    outline-color: #ffffff;
    outline-width: medium;
    outline-style: solid;
    padding: 0.5em;
    background-color: white;
    grid-area: nav;
    text-align: center;
}

.image > img {
  top:1%;
  position:absolute;
}