/*** ROOT START *******************************************************/
:root {
	--theme-color-1: #f4f4f4; /* (main body background colour) was #f4f4f4 */
	--theme-color-2: #000000; /* (main body text colour) */
	--theme-color-3: #35424a; /* (menu & aside background) */
	--theme-color-4: #ffffff; /* (text colour for menu & aside) */
	--theme-color-5: #e8491d; /* (red button1 background colour) */	
	--theme-color-6: #00a0f8; /* (blue logo additional generic theme colour example active link) */
	--theme-color-7: #00e6bd; /* (green logo additional generic theme colour example link hover) */
	--theme-color-8: #00dbef; /* (light blue color matched additional generic theme colour example link hover) */
	/*--theme-color-9: #; /* */
	
	--li-background:var(--theme-color-4); /* (setting a default li background color. This will be used in lists and values passed dynamically from coldfusion) */
	--li-text:var(--theme-color-2); /* (setting a default li text color. This will be used in lists and values passed dynamically from coldfusion) */
	
	--oblong-background:var(--theme-color-4); /* (setting a default li background color. This will be used in lists and values passed dynamically from coldfusion) */
	--oblong-text:var(--theme-color-2); /* (setting a default li text color. This will be used in lists and values passed dynamically from coldfusion) */
	
	--theme-radius: 5px;
	--theme-margin: 5px;
}
/*** ROOT END *********************************************************/

/*** SITE GLOBAL START ************************************************/
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Nunito', sans-serif;
}
/*** SITE GLOBAL END **************************************************/

/*** BODY START *******************************************************/
body{
	padding:0;
	margin:0;
	background-color:var(--theme-color-2);
	color:var(--theme-color-1);
    overflow-y: scroll; /* Show vertical scrollbar */	
}

ul{
	margin:0;
	padding:0;
	list-style-type: none;
}

h1:first-letter {
	color:var(--theme-color-6);
}

h2:first-letter {
	color:var(--theme-color-6);
}

.button1 {
	background-color: var(--theme-color-5);
	color: var(--theme-color-4);
	padding: 6px 16px;
	border-radius: 4px;
	border: none;
}

.button1:hover {
	background-color: transparent;
	color: var(--theme-color-4);
	padding: 5px 15px;
	border-radius: 4px;
	border: solid 1px var(--theme-color-5);
	transition: all 0.3s ease-out;
}

.button2 {
	background-color: var(--theme-color-5);
	color: var(--theme-color-4);
	padding: 6px 16px;
	border-radius: 4px;
	border: none;
	font-family: inherit;
	font-size: 16px;
	display: block;
}

.button2:hover {
	background-color: var(--theme-color-7);
	color: var(--theme-color-2);
	padding: 6px 16px;
	border-radius: 4px;
	/*border: solid 1px var(--theme-color-5);*/
	transition: all 0.3s ease-out;
}



/*** BODY END *********************************************************/

/*** CONTAINER STYLE 1 START ******************************************/
.containerStyle1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 80px auto 80px auto auto 80px;
	grid-template-areas:
	"nav-container nav-container"
	"showcase showcase"
	"blogSubscribe blogSubscribe"
	"box1 boxBlank"
	"box3 box2"
	"footer footer";
}
/*"blogSubscribe blogSubscribe"*/
/*** CONTAINER STYLE 1 END ********************************************/

/*** CONTAINER STYLE 2 START ******************************************/
.containerStyle2 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 80px auto 80px;
	grid-template-areas:
	"nav-container nav-container nav-container nav-container"
	"main-col main-col main-col sidebar"
	"footer footer footer footer";	
}
/*** CONTAINER STYLE 2 END ********************************************/

/*** CONTAINER STYLE 3 START ******************************************/
.containerStyle3 {
	display: grid;
	grid-template-columns: 1.5fr 1.5fr 1fr;
	grid-template-rows: 80px 80px auto auto 80px;
	grid-template-areas:
	"nav-container nav-container nav-container"
	"main-col main-col sidebar"
	"box4 box3 sidebar"
	"box2 box1 sidebar"
	"footer footer footer";
}
/*** CONTAINER STYLE 3 END ********************************************/

/*** POPUP STYLE 3 START **********************************************/
.popUp ul {
	line-height:175%;	
}

.popUp ul li {
	margin-top: 0.5em;
}

.popUp ul li ul {
	list-style-type: ;	
}



/*** POPUP STYLE 3 END ************************************************/

/*** MAIN-COL START ***************************************************/
.main-col {
	grid-area: main-col;
	padding:15px;
	background-color:var(--theme-color-2);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
}

.main-col .imgWidth80 img{
	display: block;
	width:80%;
	margin-top: 1.5em;
	margin-left: auto;
	margin-right:auto;
}

.main-col .boxWidth40{
	float:left;
	text-align:center;
	width:40%;
	padding:10px;
}

.main-col .boxWidth40 img{
	width:100px;
}

.main-col ul {
	line-height:175%;	
}

.main-col li {
	margin-top: 1.5em;
}

.main-col a{
	color:var(--theme-color-6);
	text-decoration:none;
	text-transform:uppercase;
	font-size:14px;
	font-weight:bold;
}

.main-col a:hover{
	color:var(--theme-color-5);
	font-weight:bold;
}

.notification {
	color: var(--theme-color-5);
}
/*** MAIN-COL END *****************************************************/

/*** SQUARE LINKS CONTAINER START *************************************/
.squareLinksContainer li{
    display: float-left;
    width: 200px;
    height: 200px;
    color:var(--li-text);
    border: 2px solid var(--li-background);
    background-color:var(--li-background);
    border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	padding: 5px;
	text-align: center;
}

.squareLinksContainer a{
	display:inline-block;
	color: var(--li-text); 
	text-decoration: none;
}

.squareLinksContainer li:hover{
	transition: all 0.4s ease-out;
	background-color: var(--theme-color-1);
	color: var(--theme-color-2); 
}
/*** SQUARE LINKS CONTAINER END ***************************************/

/*** FORM STYLING START ***********************************************/
.formContainer50 {
	/*display: grid;*/
	grid-template-columns: 500px;
	align-items: start;
	justify-content: center;
	float: left;
	border-radius: var(--theme-radius);
	/*min-height: 100vh;*/
	margin: 0;
}

fieldset {
	margin: 1em 0;
	padding: 1em 2em;
	border:solid 1px var(--theme-color-3);
	border-radius:var(--theme-radius);
	min-width; 300px;
}

legend {
	font-size: 1.25em;
	padding: 0 .25em;
	border:var(--theme-color-3);
}

.form-control {
	margin-bottom: 10px;
	padding-bottom: 20px;
	position: relative; 
}  

.form-control label {
	/*display: inline-block;*/
	display: inline-block;
	margin-top: 1em;
	margin-bottom: 5px;
	line-height:25%;	
}

.form-control label:first-of-type {
	margin-top: 0;
}

.form-control input {
	border: 1px solid var(--theme-color-3);
	border-radius: var(--theme-radius);
	display: block;
	font-family: inherit;
	font-size: 14px;
	padding: 10px;
	width: 100%;
}

.form-control.success input {
	border-color: var(--theme-color-7);
}

.form-control.error input {
	border-color: var(--theme-color-5);
}

.form-control i {
	position: absolute;
	top: 40px;
	right: 10px;
	visibility: hidden;
}

.form-control.success i.fa-check-circle {
	color:  var(--theme-color-7);
	visibility: visible;
}

.form-control.error i.fa-exclamation-circle {
	color: var(--theme-color-5);
	visibility: visible;
}

.form-control small {
	visibility: hidden;
	position: absolute;
	bottom: 0;
	left: 0;
}

.form-control.error small {
	color: var(--theme-color-5);
	visibility: visible;
}

.form button{
	background-color: var(--theme-color-5);
	color: var(--theme-color-4);
	padding: 6px 16px;
	border-radius: 4px;
	border: none;
	display: block;
	font-family: inherit;
	font-size: 16px;
	width: 100%;
}

.form button:hover {
	background-color: var(--theme-color-7);
	color: var(--theme-color-2);
	padding: 6px 16px;
	border-radius: 4px;
	/*border: solid 1px var(--theme-color-5);*/
	transition: all 0.3s ease-out;
}

/* Inputs & Textarea */
cfinput {padding: 5em;
border: solid 1px var(--theme-color-3);
}

cfinput[type="email"], cfinput[type="text"] {
	width: 20em;
}

cftextarea {
 	min-height: 8em;
	min-width: 100%;
	padding: 0.5em;
	border: solid 1px #999;
}
/*** FORM STYLING END *************************************************/

/*** FORM SIDE BY SIDE STYLING START **********************************/
.formSideBySideContainer {
	/*display: grid;*/
	grid-template-columns: 500px;
	/*align-items: start;*/
	justify-content: center;
	float: left;
	border-radius: var(--theme-radius);
	/*min-height: 100vh;*/
	margin: 0;
}

.oblongContainer500 {
    display: inline-block;
    width: 500px;
    height: auto;
    color:var(--oblong-text);
    border: 2px solid var(--oblong-background);
    background-color:var(--oblong-background);
    border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	padding: 5px;
	text-align: center;
}

/*** FORM SIDE BY SIDE STYLING END ************************************/

/*** GRID FORM TWO COLUMN START ***************************************/
.gridFormTwoColumn {
	background-color: white;
	border-radius: var(--theme-radius);
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	 width: 600px;
}

.gridFormTwoColumn ul {
  display: grid;
  grid: auto-flow / auto 1fr;
  line-height:100%;
}

.gridFormTwoColumn li {
  grid-column: span 2;
  display: grid;
  grid: subgrid;
  border: none;
  margin: 5px;    
}

.gridFormTwoColumn label {
  grid-column: 1;
  width: 250px;
  display: inline-block;
  float: left;
  white-space: nowrap;  
  font-weight: bold;
}

.gridFormTwoColumn input {
  grid-column: 2;
  float: right;
  display: inline-block;
}
/*
.gridFormTwoColumn input[type=checkbox] {
	float: left;
}
*/
/*** GRID FORM TWO COLUMN END *****************************************/








/*** SHOWCASE START ***************************************************/
.showcase {
	grid-area: showcase;
	background-image: url('../images/showcase.jpg');
	background-size: contain;
	background-repeat: no-repeat;
	min-height: 600px;
	background-attachment: fixed;
	background-position: center top;
	
	/*background-position: 0-100px;* I took this off as it didn't work for me and left a large white area at the bottom of the image when shrinking the browser width*/
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	text-align: center;
  	color: var(--theme-color-4);
}

.showcase h1 {
	margin-top:100px;
	font-size:55px;
	margin-bottom:10px;
}

.showcase p {
	font-size:20px;
}
/*** SHOWCASE END *****************************************************/


/*** BLOGSUBSCRIBE START **********************************************/
.blogSubscribe {
	grid-area: blogSubscribe;
	padding:15px;
	color:var(--theme-color-4);
	background:var(--theme-color-2);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
}

.blogSubscribe h1{
	float:left;
}

.blogSubscribe form{
	float:right;
/*	margin-top:15px;*/
	align-self: center;
	display: inline-block;
}

.blogSubscribe input[type="email"]{
	padding:4px;
	height:25px;
	width:250px;
}

.blogSubscribe button{
	background-color: var(--theme-color-5);
	color: var(--theme-color-4);
	padding: 6px 16px;
	border-radius: 4px;
	border: solid 1px var(--theme-color-5);
	/*border: none;*/
	font-family: inherit;
	font-size: 16px;
	width: 100px;
}

.blogSubscribe button:hover {
	background-color: var(--theme-color-3);
	color: var(--theme-color-4);
	padding: 6px 16px;
	border-radius: 4px;
	border: solid 1px var(--theme-color-5);
	transition: all 0.3s ease-out;
}





/*** BLOGSUBSCRIBE END ************************************************/

/*** BOXES START ******************************************************/

.box1 {
	grid-area: box1;	
	text-align: center;
	background-color:var(--theme-color-2);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	padding:15px;
}

.box2 {
	grid-area: box2;
	text-align: center;
	background-color:var(--theme-color-2);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	padding:15px;
}

.box3 {
	grid-area: box3;
	text-align: center;
	background-color:var(--theme-color-4);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	padding:15px;
}

.box4 {
	grid-area: box4;
	text-align: center;
	background-color:var(--theme-color-4);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	padding:15px;
}

.boxWidth40{
	padding:10px;
	display: block;
	margin-left: auto;
	margin-right:auto;
	width:40%;
}

.boxWidth75{
	padding:10px;
	display: block;
	margin-left: auto;
	margin-right:auto;
	width:75%;
}

.boxWidth40 img, .boxWidth50 img{
	width:100px;
}
/*** BOXES END ********************************************************/


/*** INVOICE START ****************************************************/

/*** CONTAINER INVOICE SCREEN START ***********************************/
.containerInvoiceScreen {
	background-color: white;
	display: grid;
	grid-template-columns: 12.4% 12.4% 12.4% 12.4% 0.8% 12.4% 12.4% 12.4% 12.4%;
	grid-template-rows: 125px 125px 185px 30px minmax(300px, auto) 100px 175px;
	grid-template-areas:
	"row1 row1 row1 row1 row1 row1 row1 row1 row1"
	"row2 row2 row2 row2 row2 row2 row2 row2 row2"
	"row3 row3 row3 row3 row3 row3 row3 row3 row3"
	"row4 row4 row4 row4 row4 row4 row4 row4 row4"
	"row5 row5 row5 row5 row5 row5 row5 row5 row5"
	"row6 row6 row6 row6 row6 row6 row6 row6 row6"
	"row7 row7 row7 row7 row7 row7 row7 row7 row7";
	align-self: stretch;
}
/*** CONTAINER INVOICE SCREEN END *************************************/
.row1{
	grid-area: row1;
	border-bottom: 2px solid black;
	display: inline-block;
	border-bottom: 2px solid black;
	padding-bottom: 5px;
	padding-top: 5px;
}

.invoiceLogo {
	/*grid-area: invoiceLogo;*/
	background-color: white;
	/*border-radius: var(--theme-radius);*/
	/*margin: var(--theme-margin);*/
	/*border-bottom: 2px solid black;*/
	padding-bottom: 5px;
	margin-top: 5px;
    height: 100%;
    float: right;
}

.invoiceLogo img {
	max-width: 100%;
    max-height: 100%;
    float: right;
}

.row2{
	grid-area: row2;
	display: inline-block;
	border-bottom: 2px solid black;
	padding-bottom: 5px;
	padding-top: 5px;
}

.invoiceParadigmAddress {
/*	grid-area: invoiceParadigmAddress;*/
	background-color: white;
	border-radius: var(--theme-radius);
	/*margin: var(--theme-margin);*/
	float: left;
	vertical-align: middle;
	/*border: 1px solid black;*/
	padding: 5px;
	margin-top: 5px;
	
}

.invoiceInvoice {
	/*grid-area: invoiceInvoice;*/
	background-color: white;
	border-radius: var(--theme-radius);
	/*margin: var(--theme-margin);*/
	padding: 5px;
	margin-top: 5px;
	float: right;
}

.invoiceInvoice h3 {
	float: right;
}

.row3{
	grid-area: row3;
	border-bottom: 2px solid black;
	display: inline-block;
	padding-bottom: 5px;
	padding-top: 5px;
}

.invoiceCompanyAddress {
	/*grid-area: invoiceCompanyAddress;*/
	background-color: white;
	border-radius: var(--theme-radius);
	/*margin: var(--theme-margin);*/
	/*vertical-align: middle;*/
	border: 1px solid black;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	float: left;
	width: 49.5%;
	height: 95%;
}

.invoiceHeaderInformation {
	/*grid-area: invoiceHeaderInformation;*/
	background-color: white;
	border-radius: var(--theme-radius);
	/*margin: var(--theme-margin);*/
	border: 1px solid black;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	float: right;
	width: 49.5%;
	height: 95%;
}

.invoiceHeaderInformation ul {
  display: grid;
  grid: auto-flow / auto 1fr;
  line-height:100%;
  background-color: white;
}

.invoiceHeaderInformation li {
  grid-column: span 2;
  display: grid;
  grid: subgrid;
  border: none;
  margin: 5px;    
  background-color: white;
  font-weight: bold;
}

.invoiceHeaderInformation label {
  grid-column: 1;
  width: 50px;
  display: inline-block;
  float: left;
  white-space: nowrap; 
}

.invoiceHeaderInformation input {
  grid-column: 2;
  float: right;
  display: inline-block;
}

.row4{
	grid-area: row4;
	background-color: white;
	border-bottom: 2px solid black;
	display: inline-block;
	border-bottom: 1px solid black;
	padding-bottom: 5px;
	padding-top: 5px;
}

.invoiceDescriptionHeader {
	background-color: white;
	font-weight: bold;
	width: 62.5%;
	float: left;
}

.invoiceUnitsHeader {
	background-color: white;
	font-weight: bold;
	text-align: right;
	width: 12.5%;
	float: left;
}

.invoiceRateHeader {
	background-color: white;
	font-weight: bold;
	text-align: right;
	width: 12.5%;
	float: left;
}

.invoiceAmountHeader {
	background-color: white;
	font-weight: bold;
	text-align: right;
	width: 12.5%;
	float: left;
}

.row5 {
	grid-area: row5;
	background-color: white;
	border-bottom: 2px solid black;
	display: inline-block;
	border-bottom: 1px solid black;
	padding-bottom: 5px;
	padding-top: 5px;
}

.invoiceDescriptionValues {
	background-color: white;
	border-right: 1px solid black;
	width: 62.5%;
	float: left;
}

.invoiceUnitsValues {
	background-color: white;
	text-align: right;
	width: 12.5%;
	float: left;
}

.invoiceRateValues {
	background-color: white;
	text-align: right;
	width: 12.5%;
	float: left;
}

.invoiceAmountValues {
	background-color: white;
	text-align: right;
	width: 12.5%;
	float: left;
}

.row6 {
	grid-area: row6;
	background-color: white;
	display: inline-block;
	border-bottom: 2px solid black;
	padding-bottom: 5px;
	padding-top: 5px;
}

.invoiceTotalHeadings {
	background-color: white;
	width: 12.5%;
	float: right;
	padding-top: 10px;
	font-weight: bold;
}

.invoiceTotalValues {
	background-color: white;
	width: 12.5%;
	float: right;
	padding-top: 10px;
	font-weight: bold;
	text-align: right;
}

.invoiceTotalValues p:first-of-type {
	border-top: 1px solid black;
}

.invoiceTotalValues p:last-of-type {
	border-top: 1px solid black;
	border-bottom: 2px solid black;
}

.row7 {
	grid-area: row7;
	background-color: white;
	display: inline-block;
	border-bottom: 2px solid black;
	padding-bottom: 5px;
	padding-top: 5px;
}

.invoiceBankDetails {
	background-color: white;
	float: left;
	padding-top: 10px;
}

.invoiceBankDetails h3 {
	text-decoration: underline;
}

.invoiceBankDetails th {
	text-align: left;
}

/* HERE************************************************************************************************************************* */

/*** INVOICE END ******************************************************/





/*** SERVICES START ***************************************************/
ul#ourServices li{
	list-style:none;
	/*padding:10px;*/
	border:cccccc solid 1px;
	margin-bottom:5px;
	/*background-color:var(--theme-color-3);*/
}

ul#ourServices li.themeColor7 h3, ul#ourServices b.themeColor7{
 color:var(--theme-color-7);
}

ul#ourServices li.themeColor6 h3, ul#ourServices b.themeColor6{
 color:var(--theme-color-6);
}

ul#ourServices li.themeColor5 h3, ul#ourServices b.themeColor5{
 color:var(--theme-color-5);
}

ul.logoBullet {
	/*display: list-item;*/
	margin-left: 5em;
	list-style-image: url(images/logoBullet.png);
}
/*** SERVICES END *****************************************************/


/*** SIDEBAR START ****************************************************/
.sidebar {
	grid-area: sidebar;	
	padding:15px;
	background:var(--theme-color-2);
	color:var(--theme-color-4);
	margin-top:10px;
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
	align-self: start;
}

.sidebar .moreInformation input, .sidebar .moreInformation textarea{
	width:100%;
	padding:5px;
	box-sizing: border-box;
}

.sidebar .moreInformation button{
		display:block;
		width:100%;
		margin-top:6px;
}

.sidebar .moreInformation label{
	font: 12px/1.5;
	padding:0;
	margin:0;
	color:var(--theme-color-1);
}

.sidebar .stayConnected input[type="email"]{
	width:100%;
	padding:5px;
	box-sizing: border-box;
}

.sidebar .stayConnected button{
		display:block;
		width:100%;
		margin-top:6px;
}

/*************TO DELETE AS REPLACED BY GENERIC NAV-LINKS
.sidebar a{
	color:var(--theme-color-4);
	text-decoration:none;
	font-size:16px;
}

.sidebar .active {
    color:var(--theme-color-7);
	font-weight:bold;
	text-decoration: none;
}

.sidebar a:hover{
	color: var(--theme-color-5);
	transition: all 0.2s ease-out;
}
**************************************************/

.sidebar ul {
	line-height:175%;	
}

.sidebar li {
	margin-top: 1.5em;	
}
/*** SIDEBAR END ******************************************************/


/*** FOOTER START *****************************************************/
footer {
	grid-area: footer;
	padding:5px;
	color:var(--theme-color-1);
	background-color:var(--theme-color-3);
	text-align:center;
	max-height:40px;
    clear: both;
    border-radius: var(--theme-radius);
	margin: var(--theme-margin);
}
/*** FOOTER END *******************************************************/


/*** NAVIGATION START *************************************************/
.nav-container {
	/*width: 100%;*/
	grid-area: nav-container;
	background-color: var(--theme-color-3);
	border-radius: var(--theme-radius);
	margin: var(--theme-margin);
}

.navbar {
	display: grid;
	grid-template-columns: 0.2fr auto 1fr;
	align-items: center;
	height: 80px;
	width: 90%;
	max-width: 1720px;
	margin: 0 auto;	
}

#navbar-logo {
	color: var(--theme-color-4);
	justify-self: start;
	/*margin-left: 20px;*/
	white-space: nowrap;
}

.nav-menu {
	display: grid;
	grid-template-columns: repeat(8, auto);
	list-style: none;
	text-align: center;
	width: 90%;
	justify-self: end;
}

.active {
    color:var(--theme-color-7);
	font-weight:bold;
	text-decoration: none;
}

.nav-links {
	color: var(--theme-color-4);
	text-decoration: none;
}

.nav-links:hover {
	color: var(--theme-color-5);
	transition: all 0.2s ease-out;
}

.nav-links-btn {
	background-color: var(--theme-color-5);
	padding: 6px 16px;
	border-radius: 4px;
}

.nav-links-btn:hover {
	background-color: transparent;
	color: var(--theme-color-4);
	padding: 5px 15px;
	border-radius: 4px;
	border: solid 1px var(--theme-color-5);
	transition: all 0.3s ease-out;
}

.menu-toggle .bar {
	width: 25px;
	height: 3px;
	margin: 5px auto;
	transition: all 0.3s ease-i-out;
	background: var(--theme-color-4);
}
/*** NAVIGATION END ***************************************************/

/*** MEDIA QUERIES START **********************************************/
@media screen and (max-width: 768px) {
	.containerStyle1 {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 80px auto auto auto auto auto 80px;
		grid-template-areas:
		"nav-container"
		"showcase"
		"blogSubscribe"
		"box1"
		"box2"
		"box3"
		"footer";	
	}

	.containerStyle2 {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto 80px;
		grid-template-areas:
		"nav-container"
		"main-col"
		"sidebar"
		"footer";	
	}
	
	/*** CONTAINER STYLE 3 START ******************************************/
	.containerStyle3 {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto auto auto auto;
		grid-template-areas:
		"nav-container"
		"main-col"
		"box1"
		"box2"
		"box3"
		"box4"
		"sidebar"
		"footer";	
	}
/*** CONTAINER STYLE 3 END ********************************************/

	.nav-container {
		position: relative;
	}
	
	.nav-menu {
		display: grid;
		grid-template-columns: auto;
		background: var(--theme-color-5);
		margin: 0;
		width: 100%;
		position: absolute;
		top: 80px;
		left: -100%;
		opacity: 0;
		transition: all 0.5s ease;
		z-index: 1; /* I am not sure how z-index's work but without this, if I am on a page with a form, the form elements show throught he menu bar' */
	}
	
	#navbar-logo {
		margin-left: 20px;
	}
	
	.nav-menu.active {
		background: var(--theme-color-3);
		left: 0;
		opacity: 1;
		transition: all 0.5s ease;
	}
	
	.nav-links {
		text-align: center;
		line-height: 60px;
		width: 100%;
		display: table;
	}
	
	.nav-links:hover {
		background-color: var(--theme-color-5);
		color: var(--theme-color-4);
		transition: all 0.4s ease-out;
	}
	
	.navbar {
		width: 100%;
	}
	
	.nav-links-btn {
		border: none;
		padding: 0;
		border-radius: 0;
		background-color: var(--theme-color-3);
		color: var(--theme-color-4);
		transition: all 0.4s ease-out;
	}
	
	.nav-links-btn:hover {
		border: none;
		padding: 0;
		border-radius: 0;
		background-color: var(--theme-color-5);
		color: var(--theme-color-4);
		transition: all 0.4s ease-out;
	}
	
	#mobile-menu {
		position: absolute;
		top: 20%;
		right: 5%;
		transform: translate(5%, 20%)
	}
	
	.menu-toggle .bar {
		display: block;
		cursor: pointer;
	}
	
	.menu-toggle:hover {
		cursor: pointer;
	}
	
	#mobile-menu.is-active .bar:nth-child(2) {
		opacity: 0;
	}
	
	#mobile-menu.is-active .bar:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}
	
	#mobile-menu.is-active .bar:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
	
	.blogSubscribe h1, .blogSubscribe form{
		float:none;
		text-align:center;
		width:100%;
	}
	
}
/*** MEDIA QUERIES END ************************************************/