/* --- Fortis --- */
/* --- 21/11/2024 --- */

* {
	font-family: Inter, Farro, Arial, Verdana, "sans-serif";
	font-size: 16px;
	color: #000;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #F0F8FF; 
}

#wrapper {
	max-width: 1000px;
	min-height: 100vh;
	margin: 0 auto;
	background-color: #FFFFFF;
	
	/* --- primary grid --- */
	display: grid;
	grid-template-areas:
		"banner"
		"menu"
		"content"
		"footer";
	grid-template-columns: 1fr;
	grid-template-rows: 100px 50px minmax(650px, auto) minmax(100px, auto);
	gap: 0em;
}

header, footer {
	background-color: #FFFFFF;
}

/* --- header --- */
header {
	grid-area: banner;
	width: auto;
	height: 100px;
	margin: 0em 0em 0em 0em;
	
	/* --- sub grid in header --- */
	display: grid;
	grid-template-areas:
		"logo company";
	grid-template-columns: 1fr 3fr;
	grid-template-rows: 1fr;
}

header img {
	grid-area: logo;
	padding: 1em 0em 0em 1em;
}

header h1 {
	grid-area: company;
	color: #000000;
	font-size: 4em;
	text-align: right;
	padding: 1% 2% 1% 0;
}

/* --- nav --- */
nav {
	grid-area: menu;
	width: auto;
	height: 50px;
	background-color: #D50032;
	margin: 0em 0em 0em 0em;
}

nav ul {/* --- this is the container which holds all the links --- */
	list-style: none; /* --- this removes the bullets --- */
	
	/* --- setting up the flexbox --- */
	/* --- the unordered list 'ul' is the container --- */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
}

nav a {
	text-decoration: none;
	display: block;
	padding: 1em;
	color: #FFFFFF;
}

nav a:hover {
	color: #D50032;
	/*background-color: #1516C0;*/
	background-color: #002D72;
}

/* --- m a i n   h o m e --- */
#mainhome {
	grid-area: content;
	width: auto;
	min-height: 650px;
	background-color: #FFFFFF;
	margin: 0em 0em 0em 0em;
	
	/* --- sub grid in mainhome --- */
	display: grid;
	grid-template-areas:	
		"articletop articletop"
		"asidefirst asidefirst"
		"asidesecond asidesecond"
		"asidefirstleft asidefirstright"
		"asidesecondleft asidesecondright"
		"asidethirdleft asidethirdright"
		"asidereflecter asidereflecter"
		"asidecontact asidecontact"
		"newsletfirst newsletfirst"
		"newsletsecond newsletsecond";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr .2fr .2fr .3fr .3fr .3fr .2fr .2fr .2fr .2fr;
}

#topfullwidth {
	grid-area: articletop;
	margin: 4em auto 4em auto;
	padding: 0.5em 0.5em 0.5em 0.5em;
	background-color: #FFFFFF;
	text-align: center;
}

#topfullwidth img {
	width: 100%;
}

#topfullwidth h2 {
	font-size: 2.5em;
	margin: .6em;
}

#topfullwidth h3 {
	font-size: 2em;
}

#firstfullwidth {
	grid-area: asidefirst;
	text-align: center;
	margin: 3em .1em;
}

#firstfullwidth h4 {
	font-size: 1.6em;
	margin: 1em;
}

#secondfullwidth {
	grid-area: asidesecond;
	text-align: center;
	margin: 3em 1em 12em 1em;
}

#secondfullwidth h3 {
	font-size: 1.9em;
	text-align: center;
	margin: 1em;
}

#secondfullwidth h5 {
	font-size: 1.2em;
	text-align: center;
	margin: 0.1em;
}

#firstleft {
	grid-area: asidefirstleft;
	margin: 1em 1.5em 1em 3em;
}

#firstleft img {
	padding: 1em 1em 1em 1em;
}

#firstright {
	grid-area: asidefirstright;
	margin: 1em 3em 1em 1.5em;
}

#firstright img {
	padding: 1em 1em 1em 1em;
}

#secondleft {
	grid-area: asidesecondleft;
	margin: 1em 1.5em 1em 3em;
}

#secondleft img {
	padding: 1em 1em 1em 1em;
}

#secondright {
	grid-area: asidesecondright;
	margin: 1em 3em 1em 1.5em;
}

#secondright img {
	padding: 1em 1em 1em 1em;
}

#thirdleft {
	grid-area: asidethirdleft;
	margin: 1em 1.5em 1em 3em;
}

#thirdleft img {
	padding: 1em 1em 1em 1em;
}

#thirdright {
	grid-area: asidethirdright;
	margin: 1em 3em 1em 1.5em;
}

#thirdright img {
	padding: 1em 1em 1em 1em;
}

#referencelecter {
	grid-area: asidereflecter;
	text-align: center;
	margin: 3em 1em 3em 1em;
}

#referencelecter img {
	padding: 1em 1em 1em 1em;
}

#referencelecter h5{
	font-size: 1.2em;
}

#contactus {
	grid-area: asidecontact;
	text-align: center;
	margin: 3em 1em 3em 1em;
}

#contactus a {
	text-decoration: none;
	display: block;
	padding: .1em;
	color: #002D72;
}

#contactus a:hover {
	color: #D50032;
}

#newslett {
	grid-area: newsletfirst;
	text-align: center;
	margin: 3em 1em 1em 1em;
}

#mainhome form {
	grid-area: newsletsecond;
	width: 27em;
	background: #FBFDFF;
	border: 1px solid #0063FB;
	text-align: left;
	margin: 0 auto;
}

#mainhome form fieldset {
	border: 1px solid #0063FB;
	padding: 1em;
	margin: 1em;
}



/* --- m a i n   a b o u t --- */
#mainabout {
	grid-area: content;
	width: auto;
	min-height: 650px;
	background-color: #FFFFFF;
	margin: 0em 0em 0em 0em;
	
	/* --- sub grid in mainabout --- */
	display: grid;
	grid-template-areas:	
		"article1"
		"aside1"
		"aside2";
	grid-template-columns: 1fr;
	grid-template-rows: .6fr .6fr .6fr;
}

#aboutart1 {
	grid-area: article1;
	background-color: #E8F1FF;
	margin: 1em 0em 2.5em 0em;
}

#aboutart1 h4 {
	padding: .3em .3em 1em .6em;
	font-size: 1em;
}

#aboutart1 h2 {
	padding: .3em .3em 1em .3em;
	font-size: 1.6em;
}

#aboutart1 p {
	padding: .3em .3em .3em .5em;
	font-size: 1.2em;
}

#aboutasi1 {
	grid-area: aside1;
	background-color: #FFFFFF;
	margin: 1em 1em 2.5em 1em;
}

#aboutasi1 h4 {
	padding: .3em .3em 1em .6em;
	font-size: 1.6em;
}

#aboutasi1 p {
	padding: .3em .3em .3em 1.5em;
	font-size: 1.5em;
}

#aboutasi2 {
	grid-area: aside2;
	background-color: #E8F1FF;
	margin: 1em 0em 2.5em 0em;
}

#aboutasi2 h3 {
	padding: .3em .3em 1em .6em;
	font-size: 1.5em;
}

#aboutasi2 p {
	padding: .3em .3em .3em .9em;
	font-size: 1.2em;
}



/* --- m a i n   s e r v i c e s --- */
#mainservices {
	grid-area: content;
	width: auto;
	min-height: 650px;
	background-color: #FFFFFF;
	margin: 0em 0em 0em 0em;
	
	/* --- sub grid in mainservices --- */
	display: grid;
	grid-template-areas:	
		"article2";
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

#servicesart1 {
	grid-area: article2;
	background-color: #E8F1FF;
	margin: 1em 0em 1em 0em;
}

#servicesart1 h2 {
	padding: .3em .3em .6em .6em;
	font-size: 1.5em;
}

#servicesart1 h3 {
	padding: .3em .3em .1em .6em;
	font-size: 1.2em;
}

#servicesart1 p {
	padding: .3em .3em .3em .6em;
	font-size: 1.2em;
}



/* --- m a i n    r e s o u r c e s --- */
#mainresources {
	grid-area: content;
	width: auto;
	min-height: 650px;
	background-color: #FFFFFF;
	margin: 0em 0em 0em 0em;
	
	/* --- sub grid in mainresources --- */
	display: grid;
	grid-template-areas:	
		"aside3 aside4 aside5";
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
}

#resourcesasi1 {
	grid-area: aside3;
	margin: 1em .5em 1em 1em;
}

#resourcesasi1 h4, #resourcesasi2 h4, #resourcesasi3 h4 {
	font-size: 1.6em;
	padding: .3em .3em .3em .2em;
}

#resourcesasi1 p, #resourcesasi2 p, #resourcesasi3 p {
	font-size: 1.1em;
	padding: .3em .3em .3em .3em;
}

#resourcesasi1 a {
	font-size: 1em;
	padding: .3em .3em .3em 0em;
	text-decoration: none;
	color: #0063FB;
}

#resourcesasi1 a:visited {
	text-decoration: none;
	color: #86B6FF;
}

#resourcesasi1 a:hover {
	text-decoration: none;
	color: #3786FF;
}

#resourcesasi1 a:active {
	text-decoration: none;
	color: #004CC0;
}

#resourcesasi2 {
	grid-area: aside4;
	margin: 1em .5em 1em .5em;
}

#resourcesasi3 {
	grid-area: aside5;
	margin: 1em 1em 1em .5em;
}

#resourcescandleint {
	grid-area: content;
	width: auto;
	min-height: 650px;
	background-color: #FFFFFF;
	margin: 0em 0em 0em 0em;
	
	/* --- sub grid in resourcescandleint --- */
	display: grid;
	grid-template-areas:	
		"articlecandleint";
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

#candleint {
	grid-area: articlecandleint;
	background: #FFFFFF;
	margin: 1em 0em 1em 0em;
}

#candleint h2 {
	padding: .3em .3em .6em .6em;
	font-size: 1.5em;
}

#candleint p {
	padding: .3em .3em .3em .9em;
	font-size: 1.2em;
}



/* --- m a i n    m a r k e t s --- */
#mainmarkets {
	grid-area: content;
	width: auto;
	min-height: 650px;
	background-color: #FFFFFF;
	margin: 0em 0em 0em 0em;
	text-align: center;
	
	/* --- sub grid in mainmarkets --- */
	display: grid;
	grid-template-areas:
		"major major"
		"market1 market2"
		"market1text market2text"
		"market3 market4"
		"market3text market4text"
		"market5 market6"
		"market5text market6text"
		"market7 market8"
		"market7text market8text"
		"market9 market10"
		"market9text market10text"
		"market11 market12"
		"market11text market12text"
		"market13 market14"
		"market13text market14text"
		"market15 market16"
		"market15text market16text"
		"market17 market18"
		"market17text market18text";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: .5fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr;
}

#mainmarkets h4 {
	grid-area: major;
	text-align: center;
	margin: 1em auto 2em auto;
	padding: .5em;
	font-size: 2em;
}

#marketsasi1, #marketsasi2, #marketsasi3, #marketsasi4, #marketsasi5, #marketsasi6, #marketsasi7, #marketsasi8, #marketsasi9, #marketsasi10, #marketsasi11, #marketsasi12, #marketsasi13, #marketsasi14, #marketsasi15, #marketsasi16, #marketsasi17, #marketsasi18 {
	margin: .5em .5em .5em .5em;
	padding: .5em;
}

#marketsasi1 p, #marketsasi2 p, #marketsasi3 p, #marketsasi4 p, #marketsasi5 p, #marketsasi6 p, #marketsasi7 p, #marketsasi8 p, #marketsasi9 p, #marketsasi10 p, #marketsasi11 p, #marketsasi12 p, #marketsasi13 p, #marketsasi14 p, #marketsasi15 p, #marketsasi16 p, #marketsasi17 p, #marketsasi18 p {
	margin: .5em .5em .5em .5em;
	padding: .5em;
	text-align: center;
}

#marketsasi1 {
	grid-area: market1;
}

#marketsasi1 p {
	grid-area: market1text;
}

#marketsasi2 {
	grid-area: market2;
}

#marketsasi2 p {
	grid-area: market2text;
}

#marketsasi3 {
	grid-area: market3;
}

#marketsasi3 p {
	grid-area: market3text;
}

#marketsasi4 {
	grid-area: market4;
}

#marketsasi4 p {
	grid-area: market4text;
}

#marketsasi5 {
	grid-area: market5;
}

#marketsasi5 p {
	grid-area: market5text;
}

#marketsasi6 {
	grid-area: market6;
}

#marketsasi6 p {
	grid-area: market6text;
}

#marketsasi7 {
	grid-area: market7;
}

#marketsasi7 p {
	grid-area: market7text;
}

#marketsasi8 {
	grid-area: market8;
}

#marketsasi8 p {
	grid-area: market8text;
}

#marketsasi9 {
	grid-area: market9;
}

#marketsasi9 p {
	grid-area: market9text;
}

#marketsasi10 {
	grid-area: market10;
}

#marketsasi10 p {
	grid-area: market10text;
}

#marketsasi11 {
	grid-area: market11;
}

#marketsasi11 p {
	grid-area: market11text;
}

#marketsasi12 {
	grid-area: market12;
}

#marketsasi12 p {
	grid-area: market12text;
}

#marketsasi13 {
	grid-area: market13;
}

#marketsasi13 p {
	grid-area: market13text;
}

#marketsasi14 {
	grid-area: market14;
}

#marketsasi14 p {
	grid-area: market14text;
}

#marketsasi15 {
	grid-area: market15;
}

#marketsasi15 p {
	grid-area: market15text;
}

#marketsasi16 {
	grid-area: market16;
}

#marketsasi16p {
	grid-area: market16ext;
}

#marketsasi17 {
	grid-area: market17;
}

#marketsasi17 p {
	grid-area: market17text;
}

#marketsasi18 {
	grid-area: market18;
}

#marketsasi18 p {
	grid-area: market18text;
}



/* --- m a i n   c o n t a c t --- */
#maincontact {
	grid-area: content;
	width: auto;
	min-height: 650px;
	background-color: #FFFFFF;
	margin: 0em 0em 0em 0em;

	/* --- sub grid in maincontact --- */
	display: grid;
	grid-template-areas:	
		"sectcform sectcform"
		"sectcinfo sectmap";
	grid-template-columns: 1fr;
	grid-template-rows: .6fr .6fr;
}

#cform {
	grid-area: sectcform;
}

#hcard-bob {
	grid-area: sectcinfo;
	margin: 1em 1em 1em 2em;
}

#carto {
	grid-area: sectmap;
	margin: 1em 2em 1em 1em;
}

/* --- #maincontact form {
	width: 40em;
	background: #FFFFFF;
	border: 1px solid #004CC0;
	text-align: left;
} --- */

/* --- #maincontact form {
	text-align: center;
	padding: 1em;
	border: 1px solid #000000;
	border-radius: 1em;
} --- */

#maincontact form {
	padding: 1em;
}

/* --- #maincontact form fieldset {
	border: 1px solid #004CC0;
	padding: .5em;
	margin: .5em;
} --- */

#maincontact legend {
	font-size: 1.6em;
	width: 6.3em;
	padding: .4em;
	margin: .25em;
	text-align: left;
}

#maincontact p {
	padding: 0.3em;
}

#maincontact label {
	display: inline-block;
	width: 110px;
	text-align: right;
}

#firstname, #email, #middlename, #surname, #comment {
	font: 1em sans-serif;
	box-sizing: border-box;
	border: 1px solid #999;
	border-radius: .3em;
	height: 2em;
	width: 310px;
}

#comment {
	height: 6.3em;
	resize: vertical;
	vertical-align: top;
}

#submit {
	padding: 6px;
	border: 1px solid #999;
	border-radius: .3em;
}

#terms {
	height: 1em;
	width: 40px;
}

/* --- #firstname, #email, #comment, #terms, #submit {
	padding: .1em;
	margin: .5em;
} --- */



/* --- m a i n   e r r o r --- */
#mainerror {
	grid-area: content;
	width: auto;
	min-height: 650px;
	background-color: #FFFFFF;
	margin: 0em 0em 0em 0em;

	/* --- sub grid in mainerror --- */
	display: grid;
	grid-template-areas:	
		"secterrorimg"
		"secterrormsg";
	grid-template-columns: 1fr;
	grid-template-rows: .6fr .6fr;
}

#errorimg {
	grid-area: secterrorimg;
	margin: 3em 1em 1em 1em;
	text-align: center;
}

#firstline {
	grid-area: secterrormsg;
	margin: 1em;
	text-align: center;
	font-size: 2em;
}

#secondline {
	grid-area: secterrormsg;
	margin: 1em;
	text-align: center;
	font-size: 1.1em;
}



/* --- footer --- */
footer {
	grid-area: footer;
	width: auto;
	min-height: 100px;
	margin: 0em 0em 0em 0em;
	background-color: #D50032;
	
	/* --- sub grid in footer --- */
	display: grid;
	grid-template-areas:
		"foot1 foot2 foot3";
	grid-template-columns: 1fr 1fr 3fr;
	grid-template-rows: 1fr;
}

#footerasideright {
	grid-area: foot2;
	margin: 1em 1em 1em 0.5em;
	padding: .6em;
	/* --- background: url(../images/socials.png) no-repeat center right; --- */
	/* --- Image by Piotr Malinowski Licensed under CC BY 4.0 https://www.figma.com/community/file/953753677579612502 --- */
	font-size: .3em;
	/* --- Image by Clker-Free-Vector-Images from Pixabay  --- */
	/* --- Image by <a href="https://pixabay.com/users/clker-free-vector-images-3736/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=312566">Clker-Free-Vector-Images</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=312566">Pixabay</a>  --- */
	/* --- Free for use under the Pixabay Content License --- */
}

#footerasideright ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-around;
}

#footerasideright a {
	text-decoration: none;
	display: block;
	padding: .1em;
	color: #FFFFFF;
}

#footerasideright a:hover {
	color: #D50032;
	background-color: #002D72;
}

#footerasideleft {
	grid-area: foot1;
	margin: 1em 0.5em 1em 1em;
	padding: .6em;
	font-size: .3em;
}

#footerasideleft ul {
	list-style: none; 
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
}

#footerasideleft a {
	text-decoration: none;
	display: block;
	padding: .1em;
	color: #FFFFFF;
}

#footerasideleft a:hover {
	color: #D50032;
	background-color: #002D72;
}

/* --- classes ---*/
.left {
	float: left;
	margin: 1em 1em 1em 0;
	/* --- border: 1px solid #246BCE; --- */
}

.right {
	float: right;
	margin: 0.5em;
}

.centre {
	display: block;
	margin-left: auto;
	margin-right: auto;
	/* --- width: 50% --- */
	width: auto;
}

.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
}
/* --- end --- */



/* --- media query --- */
@media screen and (max-width:600px) {
	#wrapper {
		/* --- change header height --- */
		grid-template-rows: 70px 50px minmax(650px, auto) minmax(30px, auto);
	}
	
	/* --- header --- */
	header {
		grid-template-areas:
			"logo"
			"company";
		grid-template-columns: 100%;
		grid-template-rows: 40px 1fr;
	}
	
	header img {
		margin: 0 auto;
		height: 40px;
		padding: 0;
	}
	
	header h1 {
		grid-area: company;
		font-size: .9em;
		text-align: center;
		max-width: 100%;
		padding: 1% 1% 2% 1%;
	}
	
	/* --- nav --- */
	nav a {
		font-size: 75%;
		padding: 1.5em;
	}
	
	/* --- m a i n   h o m e --- */
	#mainhome {
		grid-template-areas:
			"articletop"
			"asidefirst"
			"asidesecond"
			"asidefirstleft"
			"asidefirstright"
			"asidesecondleft"
			"asidesecondright"
			"asidethirdleft"
			"asidethirdright"
			"asidereflecter"
			"asidecontact"
			"newsletfirst"
			"newsletsecond";
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto;
	}
	
	#homemain article {
		margin: .5em;
		padding: 2em 1em 1em 1em;
	}
	
	#homemain article h2 {
		font-size: 2em;
	}
	
	#homemain article p {
		font-size: 85%;
	}
	
	#homemain aside {
		margin: .5em;
		padding: 0em 1em 0em 1em;
	}
	
	/* --- m a i n    r e s o u r c e s --- */
	#mainresources {
		grid-template-areas:	
			"aside3"
			"aside4"
			"aside5";
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 1fr;
	}
	
	/* --- m a i n   m a r k e t s --- */
	#mainmarkets {
		grid-template-areas:
			"major"
			"market1"
			"market1text"
			"market2"
			"market2text"
			"market3"
			"market3text"
			"market4"
			"market4text"
			"market5"
			"market5text"
			"market6"
			"market6text"
			"market7"
			"market7text"
			"market8"
			"market8text"
			"market9"
			"market9text"
			"market10"
			"market10text"
			"market11"
			"market11text"
			"market12"
			"market12text"
			"market13"
			"market13text"
			"market14"
			"market14text"
			"market15"
			"market15text"
			"market16"
			"market16text"
			"market17"
			"market17text"
			"market18"
			"market18text";
		grid-template-columns: 1fr;
		grid-template-rows: .5fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr 1fr .3fr;
	}
		
	/* --- m a i n   c o n t a c t --- */
	#maincontact form {
		width: auto;
		background: #FFFFFF;
		border: 1px solid #004CC0;
		text-align: left;
		margin: 1em auto;
}
	
	/* --- footer --- */
	footer {
		min-height: 30px;
		grid-template-columns: 1fr 2fr 2fr;
	}
	
	#footerasideright a {
		font-size: 73%;
	}
	
	#footerasideleft p, #footerasideright p {
		font-size: 1.2em;
	}
}