header {
	text-align: center;
}

body {
	padding: 40px 0px 40px 0px;
	margin-left: auto;
	margin-right: auto;
	font-size: 16px;
}

img {
	border-radius: 10px;
  	box-shadow: 5px 5px 10px rgba(157, 113, 110, 1);
  	max-width: 100%;
}

.currentLink {
	color: #555;
}

a:hover {
	color: #555;
}

a:active {
	color: #555;
}

a {
       text-decoration: none;
       color: #87423c;
}

body { 
      	font-family: Helvetica, Calibri, sans-serif;
      	
      	max-width: 90%
}

h1 {
	color: #87423c;
	font-size: 36px;
	text-align: center;
}

h2 {
	color: #4d1d18;
	font-size: 24px;
	text-align: center;
}

p {
       line-height: 150%;
}

li {
    list-style-type: none;
}

hr {
	border: 1px solid #682721;
}

aside {
	padding: 50px 100px 50px 0px;
	float: left;
	width: 20%;
	line-height: 2.5;
	text-align: center;
	font-size: 24px;
}

section {
	float: right;
	width: 55%;
	padding: 50px 100px 0px 0px;
}

footer {
	font-size: 0.65em;
	clear: both;
	text-align: right;
	padding: 50px 0px 0px 0px;
}

table, tr, td {
	padding: 0px 0px 0px 20px;
}

.grid { 
    	display: grid;
	width: 80%;
	justify-content: center;
	grid-gap: 75px;
	align-items: center;
	text-align: center;
	padding: 0px 50px 0px 100px;
    	grid-template-columns: 20rem 20rem 20rem;
    	grid-template-rows: 20rem 20rem;
    	grid-template-areas: 
	"s1 s1 s2"
	"s3 s4 s4"
	"s5 s5 s6"
	"s7 s8 s8";
}

span1 {
	border: 0px solid rgba(0,0,0,0.095);
	padding: 40px 40px 40px 40px;
	border-style: outset;
	border-radius: 50px;
	border-right: solid #87423c 4px;
	border-bottom: solid #4d1d18 4px;
}

span2 {
	border: 0px solid rgba(0,0,0,0.095);
	padding: 40px 40px 40px 40px;
	border-style: outset;
	border-radius: 50px;
	border-left: solid #87423c 4px;
	border-bottom: solid #4d1d18 4px;
}

.s1 {
	grid-area: s1;
}
.s2 {
	grid-area: s2;
}
.s3 {
	grid-area: s3;
}
.s4 {
	grid-area: s4;
}
.s5 {
	grid-area: s5;
}
.s6 {
	grid-area: s6;
}
.s7 {
	grid-area: s7;
}
.s8 {
	grid-area: s8;
}

/* I am aware action_page.php doesn't function currently so the contact box doesn't work :) */

input[type=text], textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #555;
	border-radius: 10px;
	box-sizing: border-box;
	margin-top: 6px;
	margin-bottom: 16px;
}

.container {
	border-radius: 5px;
	background-color: #f2f2f2;
	padding: 20px;
}

.columns {
	display: flex;
	column-gap: 60px;
	flex-direction: row;
	justify-content: center;
	padding: 0px 0px 50px 0px;
}

/* Column for Pricing page on Mobile */
@media all and (max-width:1026px) {
.columns {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0px 0px 50px 0px;
}
section {
	max-width: 70%;
	padding: 50px 0px 0px 0px;
	overflow-x: hidden;
}
aside {
	width: 18%;
}

img {
	max-width: 80%;
	margin: 50px 0px 0px 0px;
}

span1 {
	border-right: none;
	border-bottom: none;
}

span2 {
	border-left: none;
	border-bottom: none;
}

.grid { 
    	display: grid;
	width: 55%;
	grid-gap: 55px;
	grid-template-columns: 20rem;
	grid-template-rows: 20rem;
	grid-template-areas: 
	"s2"
	"s1"	
	"s3"
	"s4"	
	"s6"
	"s5"
	"s7"
	"s8";
}}


/* Changing page restrictions to fit with A4 printing (as the grid and section/aside struggle with printing) */
@page {
	size: A4;
	margin: 0;
}
@media print {
  html, body {
	width: 210mm;
	height: 297mm;
}}