/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* Set borders and padding to be included in an element's size */
	html {
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		font-size: 62.5%; /* =10px. This is called the “62.5%" trick: most browsers have a default value of 16px (100% = 16 pt). */
		margin: 0%;
	}

	*,
	*:before,
	*:after {
		-webkit-box-sizing: inherit;
		        box-sizing: inherit;
	}

/* Remove bottom white space from images */
	img {
		vertical-align: top;
	}
	
/* Font sizes */
	body {
		font-size: 1.4rem; /* =14px */
		font-family: "Metropolis", "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", sans-serif;
		font-weight: normal; /* regular */
		background-color: white;
	}

	h1 {
		font-weight: bold; 
		font-size: 2.5rem;
		color: rgb(145, 180, 142);  /* my green #91b48e */
		text-align: center;
	}

	h2 {
		font-weight: 500; /* medium */
		font-size: 2rem;
		color: rgb(145, 180, 142); /* my green #91b48e */
		text-align: center;
		padding: 0px;
		margin: 0px;	
	}
		@media screen and (min-width: 800px) {
				h2{font-size: 2.6rem;}
		}
		

		
	p, ul {
		font-size:1.6rem;
		line-height: 2rem;
	}
		@media screen and (min-width: 800px) {
			p, ul {
				font-size:1.8rem;
				line-height: 2.4rem;
			}
		}
		
	/* Image ALT Colour */
	img {
		color: #ddd1c2;	/* Mocha colour */
		text-align: center;
	}

	.portfolio-intro-text {
		font-weight: 200; /* extra light */
		font-size:1.8rem;
		line-height: 2.2rem;
		max-width: 80%;
		margin: 0px auto;
		text-align: center;
		color: #7b6852; /* dark brown -- rgb(123, 104, 82) */
		padding-top: 60px;
	}
		@media screen and (min-width: 800px) {
			.portfolio-intro-text {
				max-width: 400px;
			}
		}

/* Colours */
	.yellow {
		background-color: rgba(234, 219, 145, 0.9);	
	}

	.olive-green {
		background-color: rgba(189, 186, 153, 0.9);
	}

	.pink {
		background-color: rgba(209, 152, 153, 0.9);
	}

	.purple {
		background-color: rgba(190, 176, 181, 0.9);	
	}

	.orange {
		background-color: rgba(225, 189, 128, 0.9);	
	}
	
	.green {
	background-color: rgb(145, 180, 142); /* my green colour */
}

	.white-transparent {
	background-color: rgba(255, 255, 255, .3); /* white, very transparent */
}

	.white {
	background-color: rgb(255, 255, 255); /* white */
}

	.fawn {
	background-color: rgb(244, 240, 235);	/* my fawn colour #f4f0eb */	
}

	.brown {
		background-color: rgb(199, 178, 153); /* my milky brown colour -- #c7b299  */
	}
	
	.text-dark-brown {
		color: rgb(123, 104, 82); /*  dark brown -- #7b6852 */
	}

	.text-brown {
		color: rgb(199, 178, 153); /* my milky brown colour -- #c7b299  */
	}
	
	.text-green {
		color: rgb(145, 180, 142);  /* my green -- #91b48e */
	}
	
	.text-white {
		color: rgb(255, 255, 255);  /* white -- #ffffff */
	}


/* Anchor link location correctors */
	.anchor-position {
		display: block;
		height: 80px;
		margin-top: -80px;
		visibility: hidden;
	}

	.hero-image-anchor {
		height: 64px;
		margin-top: -64px;
	}


/* Links */
	a:link, a:visited, a:active, a:focus {
		text-decoration: none;
		color: white;	
	}

	a:hover {
		text-decoration: none;
	}
			



/* Navigation Bar MOBILE */
	nav {
		font-family: "Metropolis Semi", "Helvetica Neue", Helvetica, sans-serif;
		font-weight: 600; /* semi-bold */
		font-size: 1.4rem;
		color: rgb(255, 255, 255); /* white text */
	}

	.nav-container {
		width: 100%;
	}

	/* flex container that holds the anchor buttons */
	.flex-nav-buttons {					
		display: -webkit-box;					
		display: -ms-flexbox;					
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center; /* horizontal alignment in flex set to column */
		-ms-flex-line-pack: center;
		    align-content: center;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start; /* vertical alignment in flex set to column */
		color: white;		
	}

	.flex-nav-buttons a {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		padding: 5px 0px;	
		white-space: nowrap;
		display: inline-block; /* fallback for browsers that don't support flexbox */
		width: 100%;
		background-color: rgba(145, 180, 142, 0.9);	/* makes the nav bar the slightly transparent green colour #91b48e used in my brand */	
		border-bottom: 2px groove rgba(255, 255, 255, 0.4); /* white transparent */
			/* box-shadow: 0px 4px 4px 0px black; */  /* horizontal offset; vertical offset; blur radius Optional; spread radius Optional */
	}	
	
	/* removes bottom border from the last link container */
	.flex-nav-buttons a:last-child {
		border-bottom: initial;
	}	
	
	/* makes alternate mobile nav buttons lighter in colour */	
	 a.alternate-row {
		background-color: rgba(145, 180, 142, 0.8); /* lighter, more transparent version of my green */	
	}	 
	
	/* On hover, changes button colour to fawn with scale bar in the centre	 */
	.flex-nav-buttons a:hover {		
		color: rgba(145, 180, 142, 1); /* text colour becomes green */
		/* border-bottom: 2px groove rgba(145,180,142,1); */
		background-color:  #f4f0eb;  /* fawn colour */
		background-image: url(/images/scale-bar-3px-high.png) /* , url(/images/yellow-white_background.png) */;		 
		background-position: left center; 
		background-repeat: repeat-x;	
		-webkit-transition: background-color 0.2s ease;	
		-o-transition: background-color 0.2s ease;	
		transition: background-color 0.2s ease;
	}

	/* unhovered state: defines the style of the div inside the anchor, the div containing the button text */
	.flex-nav-buttons a div {
		display: inline-block;
		/* width: 10rem; */
		border: 1px solid rgba(145, 180, 142, 0); /* TRANSPARENT border, because a hidden border is needed to keep the button the same size as a hovered button */
		padding: 5px 10px;
	}
	
	/* hovered state: creates the white box containing the text that appears on rolling over a mobile nav bar button */
	.flex-nav-buttons a:hover div {
		background-color: white;
		border: 1px solid rgba(145, 180, 142, 1); /* my green without transparency */
		padding: 5px 20px;
		margin-left: auto;
		margin-right: auto; 
		-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2); 
		        box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);   /* horizontal offset; vertical offset; blur radius Optional; spread radius Optional */
		/* box-shadow: 0px 4px 6px 0 rgba(0, 0, 0, 0.1); */  /* horizontal offset; vertical offset; blur radius Optional; spread radius Optional */
		/* box-shadow: 0 1px 3px 0 rgba(175,174,165,.5); */ /* grey-green from gumtree */
	}
		
	.scale-bar-bottom-border {
		position: relative;
		z-index: 10;
		width: 100%;
		height: 3px;
		background-color: rgb(199, 178, 153);   /*  milky brown background colour behind the scale bar */
		background-image: url(/images/scale-bar-3px-high.png);
		background-position: bottom left; 
		background-repeat: repeat-x;
		-webkit-box-shadow: 0px 4px 8px 0px rgba(123, 104, 82, 0.5);
		        box-shadow: 0px 4px 8px 0px rgba(123, 104, 82, 0.5);  /* horizontal offset; vertical offset; blur radius Optional; spread radius Optional */
	}

		
/* BEGIN Navigation Bar DESKTOP -- 800 px and bigger */
	@media screen and (min-width: 800px) {
		nav {
			font-family: "Metropolis Semi", "Helvetica Neue", Helvetica, sans-serif;
			font-weight: 600; /* semi-bold */
			font-size: 1.4rem;
			color: rgba(255, 255, 255, 1);
		}

		.nav-container {
			position: fixed;
			top: 0;
			width: 100%;
			background-color: rgba(145, 180, 142, 0.9);	/* makes the nav bar the slightly transparent green colour (145,180,142,0.9) used in my brand */
			z-index: 10;
		}

		.flex-nav-buttons {					
			width: 70%;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			    -ms-flex-direction: row;
			        flex-direction: row;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			-webkit-box-pack: justify;
			    -ms-flex-pack: justify;
			        justify-content: space-between;
			color: white;					
			height: 60px;					
			margin: auto;
		}
							
		.flex-nav-buttons	a {
			margin: 0px;
			padding: 5px;
			white-space: nowrap;
			display: inline-block; /* fallback for browsers that don't support flexbox */
			background-color: initial; /* rgba(145,180,142,0); */	/* makes the nav bar the slightly transparent green colour (145,180,142,0.9) used in my brand */	
			width: auto;
			border: initial;
		}			
							
		.flex-nav-buttons a:hover {		
				color: rgba(145,180,142,10); /* green text */
				background-color: rgba(255, 255, 255, 1); /* white background */
				background-image: initial;	
				border-radius: 2.5px;
				border: initial;
		}
			
		.flex-nav-buttons a div {
			display: initial;
			border: initial;
			padding: 0;
		}	

		.flex-nav-buttons a:hover div {
			background-color: white;
			border: initial;
			padding: 0;
			margin-left: auto;
			margin-right: auto; 
			 -webkit-box-shadow: initial; 
			         box-shadow: initial; 	
		}
			
		.scale-bar-bottom-border {
			display: initial;
			position: fixed;
			top: 60px;
			width: 100%;
			height: 5px;
			background-color:rgba(199,178,153,1);  /*  brown background colour behind the scale bar */
			background-image: url(/images/scale-bar-5px-high.png);
			background-position: bottom left; 
			background-repeat: repeat-x;
			-webkit-box-shadow: 0px 4px 10px 0px rgba(123, 104, 82, 0.5);
			        box-shadow: 0px 4px 10px 0px rgba(123, 104, 82, 0.5);  /*  dark brown - horizontal offset; vertical offset; blur radius Optional; spread radius Optional */
			z-index: 10;
		}
	}	 	
/* END nav bar DESKTOP -- 800px and bigger */

/* Hero image */
	.top-margin-to-clear-nav-bar {
		margin-top: 0px;	
	}
		@media screen and (min-width: 800px) {
			.top-margin-to-clear-nav-bar {
				margin-top: 64px;
			}
		}
		
	img.responsive-image {
		max-width: 100%;
		height: auto;
		z-index: 0;
	}
	

/* Recent projects heading MOBILE */
	.heading-recent-projects {
		margin-top: 0;
		margin-bottom: 6%;
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: space-evenly;
		    -ms-flex-pack: space-evenly;
		        justify-content: space-evenly;
		color: rgb(145, 180, 142);		/* sets the text colour to my green #91b48e */			
		background-color: #efdb97;	/* makes the background my mustard yellow */
		background-image: url(/images/scale-bar-3px-high.png), url(/images/yellow-white_background.png);
		background-position: left center; 
		background-repeat: repeat-x;
	}
			@media screen and (min-width: 800px) {
			.heading-recent-projects {
				margin-bottom: 60px;
				background-image: url(/images/scale-bar-5px-high.png), url(/images/yellow-white_background.png);
				}				
			}
				
	.header-box {
		background-color: white;
		border: 1.5px solid rgb(145, 180, 142); /* my green #91b48e*/
		padding: 10px 30px 10px 30px;
		float: left; /* this is a fallback for browsers that don't support flexbox */
		margin-left: auto; /* this is a fallback for browsers that don't support flexbox */
		margin-right: auto; /* this is a fallback for browsers that don't support flexbox */
		 -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
		         box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);   /* horizontal offset; vertical offset; blur radius Optional; spread radius Optional */
	}
		@media screen and (min-width: 800px) {
			.header-box {
				padding: 10px 50px 10px 50px;
			}
		}		

	
/* Slideshow */

	/* Slideshow container */
	.slideshow-container {
		max-width: 100%;
		position: relative;
		margin: auto;
		border: 3px solid #c7b299; /* my milky brown colour */
	}
		@media screen and (min-width: 800px) {
			.slideshow-container {
				max-width: 80%;
				border: 10px solid #c7b299; /* my milky brown colour */
			}
		}

	/* Hide the images by default */
	.mySlides {
		display: none;
	}

	.slideshow-image {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
	}

	/* Slide Caption text MOBILE */
	.caption-text {
		font-weight: 100; /* Metropolis thin */
		color: white;
		font-size: 5vw;
		padding: 4px 12px;
		position: absolute;
		bottom: 0%;
		width: 60%;
		margin-left: 20%;
		margin-right: 20%;
		text-align: center;
		background-color: rgba(199, 178, 153, 0.9); /* my milky brown colour #c7b299, but slightly transparent */
		border-radius: 5px 5px 0 0;

	}
			@media screen and (min-width: 800px) {
			.caption-text {
				font-size: 2vw;		
				width: 40%;
				margin-left: 30%;
				margin-right: 30%;
				bottom: 0%;
				color: white;
				background-color: rgba(199, 178, 153, 0.9); /* my milky brown colour #c7b299, but slightly transparent */
				border-radius: 5px 5px 0 0;	
				border-bottom: initial;		
			}			
		}

	.sub-caption-text {
		font-style: italic;
		font-size: 3vw;
	}
		@media screen and (min-width: 800px) {
			.sub-caption-text {
				font-style: italic;
				font-size: 1.25vw;
			}
		}

	/* Slide Number text (1/5, 2/5, etc.) */
	.numbertext {
		text-align: center;
		color: white;
		width: 60px;
		font-size: 0.75rem;
		padding: 8px 12px;
		position: absolute;
		top: 0%;
		/* margin-left: 0%; */
		background-color: #c7b299; /* my milky brown */
		border-radius: 0 0 5px 5px;
		left: 50%;
		-ms-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		        transform: translateX(-50%);
	}

	.slideshow-button-block {
		text-align: center;
		background-color: #c7b299; /* my milky brown colour */	
		max-width: 100%;
		padding: .5% 0px;
		margin: 0 auto 6% auto;	
	}
		@media screen and (min-width: 800px) {
		.slideshow-button-block {
			max-width: 80%;
			/* max-width: 1100px; */
			margin: 0 auto 60px auto;	
			}
		}

	/* Clear floats before and after the columns */
	.row::before,
	.row::after {
		display: table;
		content: "  ";
		clear: both;	
	}

	.four-fifths {
		width: 100%;
	}

	/* Float columns side by side */
	.column {
		float: left;
	}

	.button-groups {
		display: inline-block;	
		margin: 0 5%;
		padding: 0;
	}

	/* Next & previous buttons */
	.arrow {
		cursor: pointer;
		color: white;
		font-size: 18px;
		-webkit-transition: 0.6s ease;
		-o-transition: 0.6s ease;
		transition: 0.6s ease;
		-webkit-user-select: none;
		   -moz-user-select: none;
		    -ms-user-select: none;
		        user-select: none;
	}

	/* On hover, make arrows brown */
	.arrow:hover {
		color: #7b6852; /* my dark brown */
	}

	/* The dots/bullets/indicators */
	.button {
		cursor: pointer;
		height: 15px;
		width: 15px;
		margin: 0 2px;
		background-color: #d2c1ad; /* a light brown */
		border: 1px solid #bdba99; /* my olive-green */
		border-radius: 10%; 
		display: inline-block;
		-webkit-transition: background-color 0.6s ease;
		-o-transition: background-color 0.6s ease;
		transition: background-color 0.6s ease;
	}

	.active, .button:hover {
		background-color: #eadb91; /* my border yellow */
		border: 1px solid white;
	}

	/* Fading animation */
	.fade {
		-webkit-animation-name: fade;
		-webkit-animation-duration: 1.5s;
		animation-name: fade;
		animation-duration: 1.5s;
	}

	@-webkit-keyframes fade {
		from {opacity: .4}
		to {opacity: 1}
	}

	@keyframes fade {
		from {opacity: .4}
		to {opacity: 1}
	}


/* HEADING Services Offered*/
	.heading-services-offered {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: space-evenly;
		    -ms-flex-pack: space-evenly;
		        justify-content: space-evenly;
		color: rgb(145, 180, 142); /* sets the text colour to my green */			
		background-color: rgba(145,180,142,1); /* makes the background my green */
		background-image: url(/images/scale-bar-3px-high.png), url(/images/white-green_background.png);
		background-position: left center; 
		background-repeat: repeat-x;
		}		
			@media screen and (min-width: 800px) {
				.heading-services-offered {
					background-image: url(/images/scale-bar-5px-high.png), url(/images/white-green_background.png);
					}
			}
	
/* Services Offered FLEX */

	/* Creates the flex container that holds the cards */
	.flex-container-services {
		max-width: 80%;
		position: relative;
		margin: 0px auto;
		padding: 60px 0px 60px 0px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: space-evenly;
		    -ms-flex-pack: space-evenly;
		        justify-content: space-evenly;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
	}
		
	/* Creates the individual cards naming my services */
	.flex-services-card {
		width: 100%;
		margin: 0px 0px 10px 0px;
		text-align: left;
		position: relative;
		display: table-cell; /* fallback for browser's that don't support flexbox */
		float: left;  /* fallback for browser's that don't support flexbox */
		-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
	}
		@media screen and (min-width: 800px) {
		.flex-services-card {
				width: 60%;
			}
		}
		
	.flex-services-card:hover {
		-webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
		        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
		border-left-width: 25px;
	}	
	
	.border-yellow {
		border-left: 15px solid rgba(234, 219, 145, 0.9); /* #eadb91 */	
	}
	.border-olive-green {
		border-left: 15px solid rgba(189, 186, 153, 0.9); /* #bdba99 */
	}
	.border-pink {
		border-left: 15px solid rgba(209, 152, 153, 0.9); /* #d19899 */
	}
	.border-purple {
		border-left: 15px solid rgba(190, 176, 181, 0.9); /* #beb0b5 */ 	
	}
	.border-burnt-green {
		border-left: 15px solid rgba(174, 182, 125, 0.9); /* #aeb67d */
	}
	.border-orange {
		border-left: 15px solid rgba(225, 189, 128, 0.9); /* #e1bd80 */
	}
	
	h3 {
		font-weight: 500; /* medium */
		font-size: 1.8rem;
		line-height: 1.4rem;
		padding: 15px 5px;
		margin: 0px;	
	}
		@media screen and (min-width: 800px) {
			h3 {
				font-size: 2rem;
			}
		}		



/* EXPERIENCE and PRECISION	 */

	/* Unordered list style Experience and Precision */
	p.white-left-text {
		max-width: 50%;
		margin: 0px auto;
		padding: 60px 0px;
		text-align: left;
		color: white;
	}


/* used by email section */
	.no-marker-list {
	  list-style-type: none;
	}
	
	

/* HEADING Atlas Work */
	.heading-atlas-work {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: space-evenly;
		    -ms-flex-pack: space-evenly;
		        justify-content: space-evenly;
		color: rgb(145, 180, 142);		/* sets the text colour to my green */			
		background-color: #c7b299; /* my brown colour */
		background-image: url(/images/scale-bar-3px-high.png), url(/images/brown-white_background.png);
		background-position: left center; 
		background-repeat: repeat-x;
		}					
			@media screen and (min-width: 800px) {
				.heading-atlas-work {
					background-image: url(/images/scale-bar-5px-high.png), url(/images/brown-white_background.png);
				}
			}


/* Atlas Cards FLEX */
	
	/* This flex-container is used for the 'atlas section'; the 'portfolio intro text'; and the 'portfolio card section' */
	.flex-container {
		max-width: 80%;
		position: relative;
		margin: 60px auto;	
		padding: 0px;
		text-align: center;	
		display: -webkit-box;	
		display: -ms-flexbox;	
		display: flex;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		-webkit-box-pack: space-evenly;
		    -ms-flex-pack: space-evenly;
		        justify-content: space-evenly;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
	}

	.flex-column-card {
		max-width: 100%;
		margin: 0 10px 40px 10px;
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 300px;
		        flex: 0 0 300px; /* flex: 0 0 180px; */
		position: relative;
		display: table-cell; /* fallback for browser's that don't support flexbox */
		/* max-width: 300px;  *//* fallback for browser's that don't support flexbox */
		float: left;  /* fallback for browser's that don't support flexbox */
		-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	}
		@media screen and (min-width: 800px) {
		.flex-column-card {
			-webkit-box-flex: 0;
			    -ms-flex: 0 0 400px;
			        flex: 0 0 400px;
			margin: 0 10px 60px 10px;
			}
		}

	.flex-column-card:hover {
		-webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
		        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
	}

	.atlas-card-image {
		max-width: 100%;
		height: auto;	
	}

	.atlas-card-caption-block {
		position: absolute;
		width: 100%;
		bottom: 0%;
		height: 40%;
	}

	.centered-card-text-container {
		margin: 0;
		position: absolute;
		width: 100%;
		top: 10%;	
		/*		-ms-transform: translateY(-50%);
				transform: translateY(-50%); 	*/
		padding: 0 10px;
	}

	.atlas-card-caption {
		color: white;
		font-weight: normal;	 /* regular */
		font-size: 2rem;
		line-height: 1.6;
	} 

	.atlas-card-sub-caption {
		color: white;
		font-weight: 200; /* extra light */
		font-size: 1.4rem;
		line-height: 1;
	}


/* Portfolio HEADING */
	.heading-portfolio {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: space-evenly;
		    -ms-flex-pack: space-evenly;
		        justify-content: space-evenly;
		color: rgb(145, 180, 142);		/* sets the text colour to my green */			
		background-color: #f4f0eb; /* fawn colour */
		background-image: url(/images/scale-bar-3px-high.png), url(/images/white-fawn_background.png);
		background-position: left center; 
		background-repeat: repeat-x;
		}					
			@media screen and (min-width: 800px) {
				.heading-portfolio {
					background-image: url(/images/scale-bar-5px-high.png), url(/images/white-fawn_background.png);
				}
			}					

/* Portfolio Cards */

	/* this removes the 60px top margin set in the universal "flex-container" class */
	.margin-top-clear {
		margin-top: 0px;
	}

	/* this removes the 60px bottom margin set in the universal "flex-container" class */
	 .margin-bottom-clear {
		 margin-bottom: 0px;	 
	 }
	 
	/* Multipart card container */	
	/* Container for the entire card */
		.flex-column-portfolio-card-container {
			max-width: 100%;
			margin: 0px 10px 40px 10px;
			-webkit-box-flex: 0;
			    -ms-flex: 0 0 400px;
			        flex: 0 0 400px;
			position: relative;
			display: table-cell; /* fallback for browser's that don't support flexbox */
			float: left;
			border: 2px solid khaki; /* #F0E68C a light mustard border around portfolio card */
			background-color: white; /* makes the background white */	
			-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);	
			        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
			-webkit-transition: 0.2s;
			-o-transition: 0.2s;
			transition: 0.2s;
		}
		.flex-column-portfolio-card-container:last-child {
			margin: 0px 10px 60px 10px;
		}
			@media screen and (min-width: 800px) {
			.flex-column-portfolio-card-container {
				max-width: 400px;
				margin: 0px 10px 60px 10px;
				}
			}
	

	.flex-column-portfolio-card-container:hover {
	  -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
	          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
	}

	/* The portfolio caption's container */
		.flex-column-portfolio-card-caption-container {
				position: relative;
				width: 100%;
				height: 80px; 
		}

	.portfolio-centered-card-text-container {
		margin: 0;
		position: absolute;
		width: 100%;
		top: 20%;	
		padding: 0 15px;
	}
	
	/* Heading for each portfolio card */
	.portfolio-card-caption {
		color: white;
		font-weight: normal; /* regular */
		font-size: 1.8rem;
		line-height: 2.2rem;
	} 
		@media screen and (min-width: 800px){
			.portfolio-card-caption {
				font-size: 2rem;
				line-height: 2.4rem;
			} 
		}
	
	/* Description for each portfolio card */
	.portfolio-card-sub-caption {
		color: white;
		font-weight: 200; /* extra light */
		font-size: 1.3rem;
		line-height: 0.8rem;
	}
		@media screen and (min-width: 800px){
			.portfolio-card-sub-caption {
				font-size: 1.5rem;
				line-height: 1.5rem;
			} 
		}
 
	/* The portfolio card image's container */
		.flex-column-portfolio-card-image-container {
				float: left;
				/* max-width: 400px; */
		}

	/* The actual portfolio image */
		.portfolio-card-image2 {
			max-width: 100%;
			height: auto;
			padding: 13px;
		}
/* END portfolio section */

/* HEADING contact me section */
	.heading-contact-me {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: space-evenly;
		    -ms-flex-pack: space-evenly;
		        justify-content: space-evenly;
		color: rgba(145,180,142,1);	/* sets the text colour to my green */			
		background-color: #f4f0eb;  /* makes the background behind the scale line fawn colour */
		background-image: url(/images/scale-bar-3px-high.png), url(/images/fawn-white_background.png);
		background-position: left center; 
		background-repeat: repeat-x;
		}	
			@media screen and (min-width: 800px) {
				.heading-contact-me {
					background-image: url(/images/scale-bar-5px-high.png), url(/images/fawn-white_background.png);
					}
			}
/* end HEADING contact me section */


/* BEGIN contact me section */
	
	/* defines the section container */
	section.contact {		
		max-width: 100%;
		font-size: 1.4rem; /* =14px */
		font-weight: normal;
		font-family: "Metropolis", "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", sans-serif;
	}
		
	/* defines the contact me card */
	.contact-me-card {
		width: 80%;
		margin: 60px auto;
		border: 1px solid #7b6852; /* dark brown */
		-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	}
		@media screen and (min-width: 800px) {
			.contact-me-card {
				width: 400px;
			}
		}
	
	.invite {
		/* position: relative; */
	}

	
	/* Defines the ENVELOPE icon */
	.send-me-email-envelope {
		font-size: 5rem;
		line-height: 1.3;
		color: #efdb97;	/* sets the colour to my mustard yellow (239, 219, 151) */
		-webkit-transition: 2s;
		-o-transition: 2s;
		transition: 2s;
	}		
	p.contact-me-text:hover .send-me-email-envelope { 
		font-size: 5rem;
		line-height: 1.3;
		color: khaki;
		/* color: rgba(225, 189, 128, 0.9); */ /* orange #e1bd80 */
		-webkit-transition: 1s;
		-o-transition: 1s;
		transition: 1s;		
	}
	p.contact-me-text:hover { 
		background-color: rgba(145, 180, 142, 0.5); /* my airplane purple */
		-webkit-transition: 2s;
		-o-transition: 2s;
		transition: 2s;		
	}		
	
		
		
	/* defines the invitation to email me */
	.contact-me-text {	
		margin: 0px auto;
		padding: 0px 10px; /* puts a margin between the text and the card edge on small screens */
		text-align: center;
		font-size: 1.7rem;
		line-height: 1.3;
		color:  #7b6852; /* dark brown */
		background-color: rgba(145, 180, 142, 0.2); /* Green #91b48e, with transparency */
	}	

	/* Defines the width, spacing and font style of the FORM ELEMENTS*/		
	div.form-element {
		padding: 0 5%;
		margin: 10px 0px;
		color: #7b6852; /* dark brown */
	}
	div.form-element:first-child {
		margin: 30px auto 10px auto;
	}	
	div.form-element:last-child {
		margin: 0px auto 30px auto;
	}
	

	/* Defines all the INPUT BOXES' styling */
	.form-input-box {
		width:100%;
		height: 5rem;
		background-color: snow;
		font-size: 1.2rem;
		color: #7b6852; /* colour of user's entry text - dark brown */
	}
		@media screen and (min-width: 800px) {
			.form-input-box {
				font-size: 1.4rem;
			}
		}
	
 	.placeholder-text-padding {
		padding: 10px;
	}
	
	.border-yellow-box {
		border: 1px solid rgba(234, 219, 145, 0.9); /* my yellow #eadb91 */
		border-left: 15px solid rgba(234, 219, 145, 0.9); /* my yellow #eadb91 */	
			}			
			
	.border-olive-green-box {
		border: 1px solid rgba(234, 219, 145, 0.9); /* my yellow #eadb91 */
		border-left: 15px solid rgba(189, 186, 153, 0.9); /* my olive-green #bdba99 */
	}
	
	.border-pink-box {
		border: 1px solid rgba(234, 219, 145, 0.9); /* my yellow #eadb91 */
		border-left: 15px solid rgba(209, 152, 153, 0.9); /* my pink #d19899 */
	}
		
		/* Makes the wide left border of the form input boxes mustard when rolling over them */	
/* 	.border-yellow-box:hover,
	.border-olive-green-box:hover,
	.border-pink-box:hover {
		border-left: 15px solid rgba(225, 189, 128, 0.9);
	} */
	
	/* Makes the wide left border of the form input boxes darker when rolling over them */
	.border-yellow-box:hover {
		/* border-top-width: 10px */
		border-left: 15px solid rgba(209, 196, 130, 0.9); /* darker yellow */
	}
	
	.border-olive-green-box:hover {
		/* border-top-width: 10px */
		border-left: 15px solid rgba(163, 161, 132, 0.9); /* darker olive-green */
	}
	
	.border-pink-box:hover {
		/* border-top-width: 10px */
		border-left: 15px solid rgba(184, 134, 134, 0.9); /* darker pink */
	}
			
				
	/* Defines placeholder text colour and size */
	.form-input-box::-webkit-input-placeholder {
		color: #7b6852; /* dark brown - colour of the placeholder text in each form element */
		font-weight: 300; /* light */
	}
	.form-input-box::-moz-placeholder {
		color: #7b6852; /* dark brown - colour of the placeholder text in each form element */
		font-weight: 300; /* light */
	}
	.form-input-box:-ms-input-placeholder {
		color: #7b6852; /* dark brown - colour of the placeholder text in each form element */
		font-weight: 300; /* light */
	}
	.form-input-box::-ms-input-placeholder {
		color: #7b6852; /* dark brown - colour of the placeholder text in each form element */
		font-weight: 300; /* light */
	}
	.form-input-box::placeholder {
		color: #7b6852; /* dark brown - colour of the placeholder text in each form element */
		font-weight: 300; /* light */
	}
		
	
	
	/* Defines MESSAGE BOX dimensions - where you write your email message */
	.message-box {
		resize: vertical;
		min-height: 100px;
	}
		
	/* SUBMIT BUTTON styling */
	input[type=submit] {
		background-color: rgba(145, 180, 142, 0.6); /* Green #91b48e, with transparency */
		font-size: 1.2rem;
		color: white;
		/* padding: 10px 15px; */
		border: none;
		border-left: 15px solid rgba(225, 189, 128, 0.9); /* #e1bd80 */
		border-radius: 0px;
		cursor: pointer;
		width:100%;
		height: 100%;
		text-align: left;
		-webkit-transition: 2s;
		-o-transition: 2s;
		transition: 2s;
	}
		@media screen and (min-width: 800px) {
			input[type=submit] {
				font-size: 1.4rem;
			}
		}
		
	/* SUBMIT BUTTON:HOVER - on hover change colour */
	
	input[type=submit]:hover {
		-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(white), to(transparent));
		-webkit-mask-image: linear-gradient(to right, white, transparent);
		        mask-image: -webkit-gradient(linear, left top, right top, from(white), to(transparent));
		        mask-image: linear-gradient(to right, white, transparent);
		background-color: rgba(225, 189, 128, 0.9); /* my orange #e1bd80 */			
		-webkit-transition: 2s;			
		-o-transition: 2s;			
		transition: 2s;
		border-left: 15px solid #e5c691; /* darker orange */
	}


/* END contact me card */



/* BEGIN Bottom Nav Bar MOBILE only */
	/* Hide Bottom Nav Bar on bigger screens */
	@media screen and (min-width: 800px) {
			nav.nav-bottom {
				display: none;
			}
	 }
	 
	.scale-bar-top-border {
		display: block;
		width: 100%;
		height: 3px;
		background-color:rgba(199, 178, 153, 1);   /*  #eadb91 milky brown background colour behind the scale bar */
		background-image: url(/images/scale-bar-3px-high.png);
		background-position:left center; 
		background-repeat: repeat-x;
		-webkit-box-shadow: 0px -4px 8px 0 rgba(123, 104, 82, 0.5);
		        box-shadow: 0px -4px 8px 0 rgba(123, 104, 82, 0.5);  /* #eadb91 milky brown shadow - horizontal offset; vertical offset; blur radius Optional; spread radius Optional */	
		z-index: 10;		
	}
		@media screen and (min-width: 800px){
			.scale-bar-top-border {
				display: block;
				width: 100%;
				height: 5px;
				background-color:rgba(199, 178, 153, 1);   /* #eadb91 milky brown background colour behind the scale bar */
				background-image: url(/images/scale-bar-5px-high.png);
				background-position:left center; 
				background-repeat: repeat-x;
				-webkit-box-shadow: 0px -4px 10px 0 rgba(123, 104, 82, 0.5);
				        box-shadow: 0px -4px 10px 0 rgba(123, 104, 82, 0.5);  /*  #7B6852 dark brown shadow - horizontal offset; vertical offset; blur radius Optional; spread radius Optional */	
				z-index: 10;		
	}
		}
/* END Bottom Nav Bar */	


/* begin FOOTER */

	/* FIXES element to BOTTOM of screen */
		.fixed-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 3;
		}
	
	/* Defines bottom bar size and a shadow facing UPWARDS */
		.bottom-bar {
			width: 100%;
			-webkit-box-shadow: 0px -4px 6px 0 rgba(0, 0, 0, 0.5);
			        box-shadow: 0px -4px 6px 0 rgba(0, 0, 0, 0.5);
		}
			@media screen and (min-width: 800px) {
				.bottom-bar {
					width: 100%;
					-webkit-box-shadow: none;
					        box-shadow: none;
		}	
			}
	
	/* Defines height and background colour of the footer BAR */
		.bar-fill {
			height: 47px;
			background-color: rgba(145, 180, 142, 0.9); /* Green, with transparency #91b48e */
		}
			@media screen and (min-width: 800px) {
				.bar-fill {
					height: 45px;
				}
			}
		
	/* Defines BOTTOM BAR FLEX CONTAINER */
		.flex-bottom-bar {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			-webkit-box-align: start;
			    -ms-flex-align: start;
			        align-items: start;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
		}
			@media screen and (min-width: 800px) {
				.flex-bottom-bar {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-orient: horizontal;
					-webkit-box-direction: normal;
					    -ms-flex-direction: row;
					        flex-direction: row;
					-webkit-box-align: center;
					    -ms-flex-align: center;
					        align-items: center;
					-webkit-box-pack: justify;
					    -ms-flex-pack: justify;
					        justify-content: space-between;
				}	
			}
	
	/* text FOOTER */
		.legal-text {
			font-family: "Metropolis", "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", sans-serif;
			font-weight: 500; /* medium */
			font-size: 1rem; /* =10px */
			color: rgba(255, 255, 255, 0.7); /* white, transparent */
			text-align: left;
			padding: 0% 5%;
			margin: 0px;	
			line-height: 1.6;
		}		
/* end FOOTER */