body{
	display: grid;
	grid-template-columns: 20% 60% 20%;
	grid-template-rows: auto auto auto auto;
	grid-template-areas:
		". header ."
		". nav ."
		". main ."
		". footer .";
}

header{
	grid-area: header;
	text-align: center;
}

nav{
	grid-area: nav;
}

main{
	max-width: 60%;
	grid-area: main;
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto auto;
	grid-template-areas:
        "map map"
		"contactform contactform"
		"contactdetails contactdetails";
}

footer{
	grid-area: footer;
}

.contactform{
	grid-area: contactform;
	padding: 20px;
}

.map{
	grid-area: map;
	padding: 20px 0px 20px 20px
}

.contactdetails{
	grid-area: contactdetails;
}

#details{
	float: left;
}

#numbers{
	float:right;
}



/*Form styling */
form{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
        "firstname  surname ."
        "number email ."
        "subject . ."
        "message . ."
        "buttons . .";
}

.firstname{
    grid-area: firstname;
}
.surname{
    grid-area: surname;
}
.number{
    grid-area: number;
}
.email{
    grid-area: email;
}
.subject{
    grid-area: subject;
}
.message{
    grid-area: message;
}
.buttons{
    grid-area: buttons;
}