/*===============================================
Universal for the Site, unless overriden later
================================================*/
html {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	color: #54565a;
	text-decoration: none;
	text-align: left;
}

body {
	line-height: 1.4;
	box-sizing: border-box;
}

ul {
	list-style-type: disc;
	list-style-position: inside;
	text-position: left;
	background-color: rgba(0,0,0,0);
	font-size: .7vw;
	font-size: min(.7vw,9.1px);
	line-height: 1.4;
}

a, a:visited {
	text-decoration: none;
}

i.far, i.fab, i.fas {
	color: #ffffff;
}

i.far:hover, i.fab:hover, i.fas:hover {
	color: #969fa5;
	transition: 0.5s;
}

footer div a i.far {
	color: #8f5f9e;
}

footer div a i.far:hover {
	color: #54565a;
}

.helvneuheavy {
	font-family: "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif;
	font-weight:700;
}

.helvneubold {
	font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
	font-weight:600;
}

.helvneumedium {
	font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
	font-weight:500;
}

.helvneuregular {
	font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
	font-weight:400;
}

.purpletext, #whatiscsr div h2 {
	color: #7d308a;
}

.bluecombo {
	color: #e7eef8;
	background-color: #aac8e7;
	font-family: "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif;
	font-weight:700;
}

.purplecombo {
	color: #7d308a;
	background-color: #d9b9d9;
	font-family: "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif;
	font-weight:700;
}

.greenboxes {
	color: #ffffff;
	background-color: #a2c962;
	padding: 10% 5% 10% 5%;
}

.italicstyle {
	font-style: italic;
}

li::marker {
  color: #7d308a;
}


/*===============================================
Home page
================================================*/
/*Set up grid for home page*/
#home {
	display: grid;
	width: 100vw;
	height: 100vh;
	/*grid-template-columns: 1fr 3.5fr .5fr 1.5fr 2.5fr 1fr 2.5fr 1fr;
	grid-template-rows: .9fr .7fr 1.5fr 3fr 2.5fr .8fr .7fr 1.5fr;*/
	grid-template-columns: 3.5fr 3.5fr .5fr 1.5fr 2.5fr 6fr 2.5fr 3.5fr;
	grid-template-rows: .9fr .7fr 1.5fr 4fr 2.5fr .8fr .7fr 2.7fr;
	z-index: 1;
}

/*Full page image for home page*/ 
#home-item1 {
	background-color: #e7d4e9;
	background-image: url("../images/beach2024ps.jpg");
	grid-column-start: 1;
	grid-column-end: 9;
	grid-row-start: 1;
	grid-row-end: 9;
    z-index: 1;
    background-repeat: no-repeat;
	background-position: 0;
	position: relative;
	background-size: cover;
    /*object-fit: cover;*/
}

/*Social media icons and navigation menu bars in header*/
header {
	grid-column-start: 7;
	grid-column-end: 8;
	grid-row-start: 2;
	grid-row-end: 3;
    justify-self: start;
    align-self: center;
    z-index: 3;
    background-color: rgb(255,255,255,0);
    width: 100%;
    display: inline-block;
}

nav, nav a {
	display: inline-block;
}

/*Main navigation bars styling*/
.home-nav {
	display: inline-grid;
	position: relative;
}

a.dropdown-button i {
	background-color: rgba(255,255,255,0);
	padding: 1%;
	border: none;
}

.dropdown-list {
	/*Hide it until hovered over*/
	display: none;
	position: absolute;
	right: 10%;
	background-color: #969fa5;
	min-width: 240px;
	z-index: 4;
}

/*Display the dropdown list when hover over*/
.home-nav:hover .dropdown-list {
	display: block;
}

/*Do not display the dropdown button when dropdown list displays*/
.home-nav:hover .dropdown-button {
	visibility: hidden;
}

/*Style links inside dropdown list*/
.dropdown-list a {
	display: block;
	color: #7d308a;
	padding: .4em .1em;
	text-align: left;
	line-height: 1.5;
	font-size: 1.35vw;
	font-size: max(1.35vw,12.5px);
	padding-left: 5%;
	z-index: 5;
}

/*On hover, change the color of dropdown links*/
.dropdown-list a:hover {
	background-color: #54565a;
	/*background-color: #e7eef8;*/
	color: #ffffff;
	font-size: 1.35vw;
	font-size: max(1.35vw,12.5px);
	padding-left: 5%;
	z-index: 5;
}

/*Company logo on home page*/
#home-item3 {
	grid-column-start: 2;
	grid-column-end: 5;
	grid-row-start: 2;
	grid-row-end: 4;
    z-index: 2;
}

#home-item3a {
    background-color: rgb(0,0,0,0);
    align-self: center;
	width: 100%;
	z-index: 2;
}

#home-item3b {
	display: none;
    font-size: 1.2vw;
    font-size: min(1.2vw,18px);
    align-self: center;
	width: 95%;
	line-height: 1.25;
}

/*Strapline*/
#home-item4 {
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 5;
	grid-row-end: 6;
	z-index: 2;
	color: #54565a;
	/*color: #969fa5;*/
    font-size: 3vw;
    font-size: max(3vw,22px);
    line-height: 1.2;
}

/*Button to click to go to How We Can Help section*/
#home-item5 {
	grid-column-start: 2;
	grid-column-end: 5;
	grid-row-start: 7;
	grid-row-end: 8;
	z-index: 2;
	color: #ffffff;
	font-size: 1.1vw;
	font-size: max(1.1vw,10.75px);
	background-color: #7d308a;
	border-radius: 8%/50%;
	border: none;
	text-align: center;
	display: inline-block;
	text-decoration: none;
}

/*Need to fix this below and add onclick properties*/
#home-item5:hover {
	background-color: #54565a;
	transition: 0.5s;
	border: none;
	text-decoration: none;
}

#home-item5:active, #home-item5:after, #home-item5:onclick {
	text-decoration: none;
	border: none;
}

/*===============================================
Section connecting Home page and What is CSR
================================================*/

/*#connecting-item1 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	padding: 10%;
	font-size: 3vw;
	font-size: max(3vw,20px);
	line-height: 1.2;
}

#connecting-item2 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
	align-content: center;
	padding-top: 10%;
	padding-bottom: 10%;
	padding-left: 1%;
	padding-right: 10%;
}*/


/*Set up grid for section*/
#connecting {
	display: grid;
	width: 100vw;
	height: 46vh;/*Need to check this*/
	grid-template-columns: 3.5fr 9.3fr 9.3fr 3.5fr;
	grid-template-rows: 6.1fr;
	z-index: 1;
}

#connecting-item1 {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;
	padding-top: 8%;
	padding-bottom: 3.5%;
	padding-left: 10%;
	padding-right: 10%;
	font-size: 3vw;
	font-size: max(3vw,22px);
	line-height: 1.2;
	justify-content: center;
}

#connecting-item2 {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	align-content: center;
	padding-top: 5%;
	padding-bottom: 5%;
	padding-right: 10%;
}

/*===============================================
What is CSR section - part 1
================================================*/

/*Set classes of font sizes and colours*/
.whatisparas {
	font-size: 1vw;
	font-size: max(1vw,14px);
}

.whatissubheads {
	font-weight: bold;
	font-size: max(1.3vw,15.5px);
	/*color: #ffffff; #7d308a*/
	padding-top: 3%;
}

.whatisicons {
	z-index: 4;
	background-color: rgb(0,0,0,0);
    align-content: center;
	width: 98%;
}

/*Set up grid for part 1 of What is CSR section
Would have been #P1whatiscsr but name as per below
for links*/
#whatz {
	display: grid;
	width: 100vw;
	height: 100vh;
	grid-template-columns: 3.5fr 9.3fr 9.3fr 3.5fr;
	grid-template-rows: 1.1fr 6fr 6fr 1.1fr;
	z-index: 1;
}

#whatiscsr {
	/*Position on the main grid*/
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 4;
	/*Turn into a sub-grid within the main grid*/
	display: grid;
	grid-template-columns: 9fr 9fr .6fr;
	grid-template-rows: 7.2fr 3.5fr .9fr 7.2fr 3.5fr;
}

#P1whatiscsr-item2 {
	/*Position on the main grid*/
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 4;
	/*Turn into a sub-grid within the main grid*/
	display: grid;
	grid-template-columns: 9fr .6fr 9fr;
	grid-template-rows: 7.2fr 3.5fr .9fr 7.2fr 3.5fr;
}

#P1whatiscsr-item3 {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 3;
	font-size: 3vw;
	font-size: max(3vw,22px);
	z-index: 3;
	align-content: flex-start;
	line-height: 1.2;
}

#P1whatiscsr-item4 {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 6;
	height: 100%;
	width: 100%;
	background-image: url("../images/vlogo.png");
	z-index: 2;
    background-repeat: no-repeat;
	background-position: left 0% bottom 20%;/*0 was previous value*/
	position: relative;
	background-size: contain;
}

#formattinghelp {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	height: 100%;
	width: 100%;
	background-image: url("../images/philanthropyicon.png");
	z-index: 3;
    background-repeat: no-repeat;
	background-position: 50% 50%;
	position: relative;
	background-size: cover;
	visibility: hidden;
}

#formattinghelp2 {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	z-index: 1;
	visibility: hidden;
}

#P1whatiscsr-item5 {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 4;
	grid-row-end: 5;
	height: 100%;
	width: 100%;
	background-image: url("../images/diversityicon.png");
	z-index: 3;
    background-repeat: no-repeat;
	background-position: 50% 50%;
	position: relative;
	background-size: cover;
}

#P1whatiscsr-item5b {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 5;
	grid-row-end: 6;
	z-index: 3;
}

#P1whatiscsr-item6 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	height: 100%;
	width: 100%;
	background-image: url("../images/philanthropyicon.png");
	z-index: 3;
    background-repeat: no-repeat;
	background-position: 50% 50%;
	position: relative;
	background-size: cover;
}

#P1whatiscsr-item6b {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
	z-index: 3;
}

#P1whatiscsr-item7 {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;
	height: 100%;
	width: 100%;
	background-image: url("../images/volunteeringicon.png");
	z-index: 3;
    background-repeat: no-repeat;
	background-position: 50% 50%;
	position: relative;
	background-size: cover;
}

#P1whatiscsr-item7b {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
	z-index: 3;
}

#P1whatiscsr-item8 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 4;
	grid-row-end: 5;
	height: 100%;
	width: 100%;
	background-image: url("../images/socialinnovationicon.png");
	z-index: 3;
    background-repeat: no-repeat;
	background-position: 50% 50%;
	position: relative;
	background-size: cover;
}

#P1whatiscsr-item8b {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 5;
	grid-row-end: 6;
	z-index: 3;
}

#P1whatiscsr-item9 {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 4;
	grid-row-end: 5;
	height: 100%;
	width: 100%;
	background-image: url("../images/environmenticon.png");
	z-index: 3;
    background-repeat: no-repeat;
	background-position: 50% 50%;
	position: relative;
	background-size: cover;
}

#P1whatiscsr-item9b {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 5;
	grid-row-end: 6;
	z-index: 3;
}


/*===============================================
What is CSR section - part 2
================================================*/
/*Set up grid for part 2 of What is CSR section*/
#P2whatiscsr {
	display: grid;
	width: 100vw;
	max-height: 100vh;
	grid-template-columns: 3.5fr 18.6fr 3.5fr;
	grid-template-rows: 3fr 12fr;
	z-index: 1;
}

#P2whatiscsr-item1 {
	/*Position on the main grid*/
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	align-content: center;
	background-color: #e7d4e9;
	/*Turn into a sub-grid within the main grid*/
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: .6fr 2.8fr .6fr;
}

#P2whatiscsr-item2 {
	/*Position on the main grid*/
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
	/*Turn into a sub-grid within the main grid*/
	display: grid;
	grid-template-columns: 3.5fr 1.1fr 5.2fr 12.3fr 3.5fr;
	grid-template-rows: 4fr 6fr 1.25fr 2fr;
	/*Set background colour to purple*/
	background-color: #7d308a;
	z-index: 1;
	/*max-height: 75vh;*/
	height: 80vh;
}

#P2whatiscsr-item3 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
	z-index: 3;
	background-color: #e7d4e9;
	color: #d0a8cf;
	align-self: center;
    font-size: max(2.3vw,19px);
    /*font-size: max(2.3vw,29.9px);*/
    line-height: max(2.6vw,22px);
    /*line-height: 1.25;*/
    padding-left: 5%;
    padding-right: 2.5%;
    padding-bottom: 1%;
}

#P2whatiscsr-item4 {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	z-index: 3;
	background-color: #e7d4e9;
    /*align-content: flex-end;*/
    align-self: center;
    padding-left: 2.5%;
    padding-right: 5%;
    line-height: max(1.1vw,9.5px);
}

#P2whatiscsr-item4 p {
	font-size: max(.9vw,12.5px);
	line-height: max(1.2vw,14px);
}

#P2whatiscsr-item4 cite {
	font-size: .8vw;
	font-size: max(.7vw,12px);
}

#P2whatiscsr-item5 {
	grid-column-start: 2;
	grid-column-end: 5;
	grid-row-start: 1;
	grid-row-end: 4;
	height: 100%;
	max-width: 100%;
	background-image: url("../images/rubbishvolunteers2.jpg");
	z-index: 2;
    background-repeat: no-repeat;
	background-position: 0;
	position: relative;
	background-size: cover;
}

#P2whatiscsr-item6 {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
	font-size: 1.3vw;
	font-size: max(1.3vw,15px);
	line-height: max(1.65vw,17.5px);
	z-index: 3;
	padding-top: 9%;
	padding-bottom: 6%;
}
 

/*===============================================
Why CSR is Good for Business section
================================================*/
/*Set up grid for first part of Why CSR is Good 
for Business section. Would have been #goodforbiz
but name as per below for navigation links*/
#good4biz {
	display: grid;
	width: 100vw;
	max-height: 100vh;
	grid-template-columns: 3.5fr 3.8fr 5.5fr 9.3fr 3.5fr;
	grid-template-rows: 3fr 8fr 3fr 1.8fr 1.8fr;
	z-index: 1;
}

/*Container for the text*/
#goodforbusiness {
	/*Position on the main grid*/
	grid-column-start: 4;
	grid-column-end: 5;
	grid-row-start: 2;
	grid-row-end: 3;
	z-index: 4;
	padding-left: 8%;
	height: 100%;
}

/*Place children AI tech photo in position*/
#goodforbiz-item2 {
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
	height: 100%;
	max-width: 98%;
	background-image: url("../images/childrentech.JPG");
	z-index: 2;
    background-repeat: no-repeat;
	background-position: 0;
	position: relative;
	background-size: cover;
}

/*Background of conclusion point full screen width*/
#goodforbiz-item3 {
	grid-column-start: 1;
	grid-column-end: 6;
	grid-row-start: 4;
	grid-row-end: 6;
	z-index: 3;
}

/*Position 1st line of conclusion point and w large font*/
#goodforbiz-item4 {
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 4;
	grid-row-end: 5;
	font-size: 2.5vw;
	font-size: max(2.5vw,19px);
	padding-left: 2.5%;
	padding-top: 1.5%;
	z-index: 4;
	line-height: 1.4;
}

/*Heading of section*/
#goodforbiz-item5 {
	color: #a2c962;
	font-size: 2.7vw;
	font-size: max(2.7vw,20.5px);
	padding-right: 0.5%;
	line-height: 1.2;
}

/*Font size of para*/
#goodforbiz-item6 {
	font-size: 1vw;
	font-size: max(1vw,13.5px);
	padding-right: 0.5%;
	line-height: 1.2;
}

#goodforbusiness ul {
	list-style-position: outside;
	padding-left: 6%;
}

/*Conclusion equation styled and positioned*/
#goodforbiz-item7 {
	grid-column-start: 3;
	grid-column-end: 5;
	grid-row-start: 5;
	grid-row-end: 6;
	font-size: 2.5vw;
	font-size: max(2.5vw,18px);
	padding-left: 2.5%;
	padding-bottom: 2%;
	z-index: 4;
	line-height: 1.2;
}

#goodforbiz-item3small {
	display: none;
}

/*Font size intro to the bullet points & bullet points*/
.goodbiztext {
	font-size: .9vw;
	font-size: max(.9vw,12.5px);
}


/*===============================================
How Can Help You - part 1A section
================================================*/
/*Set up grid for pt 1A of How Can Help section. 
Would have been #P1Ahowhelp but name
as per below for links*/
#howwecanhelp {
	display: grid;
	width: 100vw;
	height: 100vh;
	background-color: #aac8e7;/*#a2c962*/
	grid-template-columns: 3.5fr 3.3fr 6fr 1fr 8.3fr 3.5fr;
	grid-template-rows: 1fr 1.5fr 4fr 1.1fr;
	z-index: 1;
}

.howhelptext {
	color: #54565a;
	line-height: 1.4;
	font-size: max(1.2vw,12px);
}

.howhelptext2 {
	color: #54565a;
	line-height: 1.4;
	font-size: max(1.2vw,12px);
}

.howhelptext3 {
	color: #7d308a;
	line-height: 1.4;
	font-size: max(1.2vw,12px);
}

#P1Ahowhelp-item1 {
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 2;
	grid-row-end: 3;
	font-size: 3vw;
	font-size: max(3vw,22px);
	z-index: 3;
	align-content: center;
	padding-left: 1.5%;
	line-height: 1.2;
	color: #ffffff;
}

#howwecanhelp h1 {
	color: #ffffff;
}

#P1Ahowhelp-item2 {
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 3;
	grid-row-end: 4;
	/*font-size: 1.35vw;
	font-size: max(1.35vw,13.5px);
	font-size: min(1.35vw,17.55px);*/
	z-index: 3;
	padding-bottom: 10%;
	padding-right: 7%;
	padding-left: 2.5%;
	align-content: flex-start;
	line-height: 1.5;
	color: #54565a;
}


#P1Ahowhelp-item3 {
	grid-column-start: 4;
	grid-column-end: 7;
	grid-row-start: 1;
	grid-row-end: 5;
	height: 100%;
	width: 100%;
	/*background-image: url("../images/Wgrey.png");*/
	z-index: 2;
    background-repeat: no-repeat;
	background-position: 0;
	position: relative;
	background-size: cover;
	/*z-index: 2;
	align-self: flex-end;
	width: 75%;
	max-height: 80vw;
	object-fit: contain;*/
}

#P1Ahowhelp-item4 {
	grid-column-start: 4;
	grid-column-end: 6;
	grid-row-start: 3;
	grid-row-end: 4;
	object-fit: contain;
	z-index: 3;
	padding-bottom: 10%;
	padding-left: 8%;
	align-content: flex-start;
	font-size: 1.35vw;
	font-size: max(1.2vw,12px);
	line-height: 1.6;
}

#P1Ahowhelp-item4 ul li {
	font-size: 1.15vw;
	font-size: max(1.2vw,12px);
	line-height: 1.6;
}

#P1Ahowhelp-item4 ul {
	list-style-position: outside;
	padding-left: 3.5%;
	line-height: 1.6;
}


/*===============================================
How We Can Help - part 1B section
================================================*/
/*Set up grid for pt 1B of How Can Help section*/
#P1Bhowhelp {
	/*Position on the main grid*/
	display: grid;
	width: 100vw;
	height: 100vh;
	grid-template-columns: 3.5fr 9.3fr 9.3fr 3.5fr;
	grid-template-rows: 1fr;
	background-color: #9458a0;
	background-image: url("../images/fish.jpg");
	z-index: 1;
    background-repeat: no-repeat;
	background-position: 0;
	position: relative;
	background-size: cover;
}

#P1Bhowhelp-item1 {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	z-index: 3;
	padding-right: 6%;
	/*Turn into sub-grid*/
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 5.5fr 3fr 3.5fr .8fr 3.5fr .8fr 4fr;
}

#P1Bhowhelp-item2 {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;
	z-index: 3;
	/*Turn into sub-grid*/
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 5.5fr 3fr 3.5fr .8fr 3.5fr .8fr 4fr;
}

#P1Bhowhelp-item3 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
	font-size: 5vw;
	font-size: max(5vw,44px);
	/*color: #7d308a;*/
	/*color: #969fa5;*/
	z-index: 3;
	padding-left: 1%;
	align-self: flex-end;
	color: #7d308a;
}

#P1Bhowhelp-item4 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 3;
	grid-row-end: 4;
	font-size: 1.6vw;
	font-size: max(1.6vw,15px);
	z-index: 3;
	padding-right: 6%;
	padding-left: 1%;
	padding-bottom: 2%;
	display: inline-block;
	line-height: 1.25;
	align-self: flex-end;
	color: #ffffff;
}

#P1Bhowhelp-item5 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 4;
	grid-row-end: 5;
	z-index: 3;
	align-self: flex-start;
	font-size: .8vw;
	font-size: max(.8vw,12px);
	padding-left: 1%;
}

#P1Bhowhelp-item6 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 5;
	grid-row-end: 7;
	z-index: 3;
	align-self: flex-end;
	font-size: 1.4vw;
	font-size: max(1.4vw,13px);
	padding-right: 6%;
	padding-left: 1%;
	line-height: 1.25;
}

#P1Bhowhelp-item7 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 4;
	grid-row-end: 6;
	font-size: 1.35vw;
	font-size: max(1.35vw,15px);
	z-index: 3;
	display: inline-grid;
	padding-left: 6%;
	line-height: 1.15;
	align-self: flex-end;
}

#P1Bhowhelp-item8 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 6;
	grid-row-end: 7;
	font-size: 1.05vw;
	font-size: max(1.05vw,12px);
	z-index: 3;
	display: inline-grid;
	padding-left: 6%;
	align-self: flex-end;
}


/*===============================================
How We Can Help - part 2A section
================================================*/
/*Set up grid for pt 2A of How Can Help section*/
#P2Ahowhelp {
	display: grid;
	width: 100vw;
	height: 100vh;
	grid-template-columns: 3.5fr 9.3fr 9.3fr 3.5fr;
	grid-template-rows: 3.3fr 10.5fr 3.3fr;
	z-index: 1;
}

#P2Ahowhelp-item1 {
	/*Position text on the grid*/
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
	/*Turn into sub-grid*/
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 3fr 4.5fr 4.5fr;
	z-index: 2;
	padding-left: 4%;
	padding-top: 6%;
}

#P2Ahowhelp-item2 {
	/*Position text on the grid*/
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 3;
	align-self: flex-end;
	z-index: 2;
}

#P2Ahowhelp-item2a {
	/*Position text on the grid*/
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 3;
	grid-row-end: 4;
	align-self: flex-end;
	z-index: 2;
}

#P2Ahowhelp-item3 {
	/*Position pencils photo on the grid*/
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	height: 100%;
	width: 100%;
	/*height: 56vh;*/
	/*align-self: flex-end;
	/*object-fit: cover;*/
	/*max-height: 56.75vh;*/
	background-image: url("../images/pencils.jpg");
	z-index: 1;
    background-repeat: no-repeat;
	background-position: 0;
	position: relative;
	background-size: cover;
}

/*Font sizing and styling for the sections 2A, 2B & 3 below*/

#P2Ahowhelp-item4, #P2Bhowhelp-item4, #P3howhelp-item4 {
	font-size: max(2.5vw,18px);
	line-height: max(3vw,20px);
	align-self: flex-start;
}

#P2Ahowhelp-item5, #P2Bhowhelp-item5, #P3howhelp-item5 {
	font-size: max(.8vw,12px);
	line-height: max(.9vw,14px);
	display: inline-grid;
}

#P2Ahowhelp-item6, #P2Bhowhelp-item6, #P3howhelp-item6 {
	font-size: max(1.25vw,14px);
	line-height: 1.2;
}

#P2Ahowhelp-item7, #P2Bhowhelp-item7, #P3howhelp-item7 {
	font-size: max(1.45vw,15px);
	line-height: max(1.7vw,17px);
	/*display: inline-grid; 1.1*/
	align-self: flex-end;
	padding-bottom: 1.25%;
}

#P2Ahowhelp-item8, #P2Bhowhelp-item8, #P3howhelp-item8 {
	font-size: max(1.05vw,12px);
	line-height: max(1.2vw,13.5px);
	padding-top: 2%;
	/*align-self: flex-end;
	display: inline-grid; 1.15*/
}


/*===============================================
How We Can Help - part 2B section
================================================*/
/*Set up grid for pt 2B of How Can Help section*/
#P2Bhowhelp {
	/*Position rough sleeper photo on the main grid*/
	display: grid;
	width: 100vw;
	height: 100vh;
	grid-template-columns: 2.5fr 10.3fr 10.3fr 2.5fr;
	grid-template-rows: 1fr 8.5fr 6.5fr;
	background-color: #9458a0;
	background-image: url("../images/roughsleeper.jpg");
	z-index: 1;
    background-repeat: no-repeat;
	background-position: 0;
	position: relative;
	background-size: cover;
}

#P2Bhowhelp-item1 {
	/*Position green box on the main grid*/
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
	z-index: 3;
	max-height: 63vh;
	padding-top: 3%;
	padding-bottom: 3%;
	/*Turn into a sub-grid for the text*/
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 4fr 2.3fr;
}

#P2Bhowhelp-item2 {
	/*Position text on the green box sub-grid*/
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	z-index: 3;
	color: #ffffff;
	align-self: flex-start;

}

#P2Bhowhelp-item3 {
	/*Position text on the green box sub-grid*/
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
	z-index: 3;
	color: #ffffff;
	align-self: flex-end;
}

#P2Bhowhelp-item1bsmall {
	display: none;
}

#P2Bhowhelp-item5 {
	line-height: 1.1;
}

#P2Bhowhelp-item6 {
	align-self: center;
	padding-top: 5%;
}


/*===============================================
How We Can Help - part 3 section
================================================*/
/*Set up grid for 3rd part of How Can Help section*/
#P3howhelp {
	display: grid;
	width: 100vw;
	height: 100vh;
	grid-template-columns: 3.5fr 9.3fr 9.3fr 3.5fr;
	grid-template-rows: 3.3fr 10.5fr 3.3fr;
	z-index: 1;
}

#P3howhelp-item1 {
	/*Position text on the grid*/
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
	/*Turn into sub-grid*/
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 3fr 4.5fr 4.5fr;
	z-index: 2;
	padding-left: 4%;
	padding-top: 6%;
}

#P3howhelp-item2 {
	/*Position text on the grid*/
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 3;
	align-self: flex-end;
	z-index: 2;
}

#P3howhelp-item2a {
	/*Position text on the grid*/
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 3;
	grid-row-end: 4;
	align-self: flex-end;
	z-index: 2;
}

#P3howhelp-item3 {
	/*Position child health photo on the main grid*/
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	height: 100%;
	width: 100%;
	background-image: url("../images/childhealth.jpg");
	z-index: 1;
    background-repeat: no-repeat;
	background-position: 0;
	position: relative;
	background-size: cover;
}


/*===============================================
About & Contact section
================================================*/
/*Set up grid for About & Contact section*/
#aboutcontact {
	display: grid;
	width: 100vw;
	max-height: 100vh;
	grid-template-columns: 3.5fr 9.3fr 9.3fr 3.5fr;
	grid-template-rows: 9fr 1.4fr 4.2fr 1.2fr;
	z-index: 1;
}

/*Would have been #aboutcontact-item1 but name
as per below for links*/
#aboutcontact-item1 {
	/* Position on the main grid... this is just to
	provide the purple background colour */
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 1;
	grid-row-end: 3;
	background-color: #9458a0;
	z-index: 2;
}

#contact {
	/*Position on the main grid*/
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 3;
	background-color: #9458a0;
	z-index: 2;
	padding-right: 3%;
	/*Turn into a sub-grid*/
	display: grid;
	grid-template-columns: 2.6fr 6.4fr;
	grid-template-rows: 1fr 3fr 5.4fr;
	/*Font colour*/
	color: #ffffff;
	padding-top: 6%;
}

#aboutcontact-item3 {
	/*Position on the main grid*/
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 3;
	background-color: #9458a0;
	z-index: 2;
	padding-left: 3%;
	/*Turn into a sub-grid*/
	display: grid;
	grid-template-columns: 9fr;
	grid-template-rows: 1fr 3fr 5.4fr;
	/*Font colour*/
	color: #ffffff;
	padding-top: 6%;
}

#aboutcontact-item4 {
	/*Position on the main grid*/
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 4;
	/*Turn into a sub-grid*/
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: .6fr 2fr 2.5fr 1.2fr;
}

#aboutcontact-item5 {
	/*Position on the sub-grid*/
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	display: inline-grid;
	/*Font styling*/
	font-size: max(3vw,22px);
	line-height: 1.05;
	align-self: flex-start;
	padding-top: 2%;
	padding-left: 4%;
}

#aboutcontact-item6 {
	/*Position Sally photo on the sub-grid*/
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
	object-fit: cover;
	max-width: 100%;
	max-height: 18vh;
	z-index: 3;
}

#aboutcontact-item7 {
	/*Position on the sub-grid*/
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 4;
	align-self: flex-start;
	/*Font sizing*/
	font-size: max(1.1vw,12.5px);
	line-height: max(1.4vw,14.5px);
	padding-right: 3%;
	padding-bottom: 2%;
}

#aboutcontact-item8 {
	/*Position on the sub-grid*/
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 4;
	align-self: flex-start;
	/*Font styling*/
	font-size: 1.05vw;
	font-size: max(1.1vw,12.5px);
	line-height: max(1.4vw,14.5px);
	color: #ffffff;
	padding-right: 3%;
}

#aboutcontact-item9 {
	/*Position on the main grid*/
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 5;
	/*Position the photo*/
	object-fit: cover;
	max-width: 100%;
	max-height: 100%;
	z-index: 3;
}

#aboutcontact-item10 {
	/*Position on the main grid*/
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 5;
	padding-left: 3%;
	align-self: flex-end;
	line-height: 1.3;
}

#aboutcontact-item11 {
	font-size: 1.9vw;
	font-size: max(1.9vw,20px);
	color: #a2c962;
	align-self: center;
	padding-bottom: 5%;
}

#aboutcontact-item12 {
	font-size: .95vw;
	font-size: max(.95vw,13px);
	align-self: flex-end;
}

#aboutcontact-item13 {
	font-size: 1.05vw;
	font-size: max(1.05vw,14.5px);
	align-self: flex-end;
}

.emaillink {
	color: #7d308a;
	letter-spacing: 0;
}

a.emaillink:hover {
	color: #54565a;
	transition: .5s;
}

#aboutcontact-item13 a i.far {
	color: #7d308a;
}

#aboutcontact-item13 a i.far:hover {
	color: #54565a;
}

/*===============================================
Footer section
================================================*/
/*Set up grid for Footer section*/
#footersection {
	display: grid;
	width: 100vw;
	max-height: 40vh;
	grid-template-columns: 3.5fr 4.55fr .55fr 4.2fr 9.3fr 3.5fr;
	grid-template-rows: 1fr 2fr 3fr;
	text-decoration: none;
	z-index: 1;
	background-color: #d9b9d9;
}

/*Company logo*/
#footersection-item1 {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	z-index: 3;
    background-color: rgb(0,0,0,0);
    align-self: flex-end;
	width: 100%;
}

/*Footer navigation links*/
#footersection-item2 {
	grid-column-start: 4;
	grid-column-end: 5;
	grid-row-start: 2;
	grid-row-end: 3;
	/*Styling*/
	list-style-type: none;
	padding-left: 2%;
	padding-bottom: 2.5%;
	align-self: flex-end;
	text-decoration: none;
	font-size: max(.75vw,10.5px);
	line-height: 1.3;
}

#footersection-item2 li a:link {
	text-decoration: none;
	line-height: 1.5;
	color: #7d308a;
}

/*Footer strapline*/
#footersection-item3 {
	grid-column-start: 2;
	grid-column-end: 5;
	grid-row-start: 3;
	grid-row-end: 4;
	/*Styling*/
	list-style-type: none;
	padding-left: 0%;
	align-self: center;
	text-decoration: none;
	font-size: .7vw;
	font-size: max(.7vw,9.25px);
}

/*Position the social media icons and contact details*/
#footersection-item4 {
	grid-column-start: 5;
	grid-column-end: 6;
	grid-row-start: 2;
	grid-row-end: 3;
	/*Styling*/
	text-align: right;
	align-self: flex-end;
	text-decoration: none;
	font-size: .85vw;
	font-size: max(.85vw,11.5px);
}

/*Trading name*/
#footersection-item5 {
	grid-column-start: 5;
	grid-column-end: 6;
	grid-row-start: 3;
	grid-row-end: 4;
	/*Styling*/
	text-align: right;
	align-self: center;
	font-size: .55vw;
	font-size: max(.6vw,9.25px);
}

/*Styling the footer navigation menu links*/
a.footernav:hover {
	color: #54565a;
	transition: .5s;
}

/*Styling the social media icons*/
footer div a i.far, footer div a i.fab, footer div a i.fas {
	color: #8f5f9e;
}

footer div a i.far:hover, footer div a i.fab:hover, footer div a i.fas:hover {
	color: #54565a;
	transition: 0.5s;
}