/* MOBILE STYLES FIRST */


* {box-sizing: border-box;} 				/* This means the browser will include margin and padding size definitions rather than adding those values on. */

body {  	width: 100%; 
			margin: 0px;
			padding: 0px;
			font-size: 0.95em; 
			line-height: 1.5; 
			font-family: 'Merriweather', 'Helvetica', 'Helvetica Neue', sans-serif, ebrima, 'lucida sans unicode'; 
			color: #333;
			background-color: #fff;
			font-weight: 300;}

.space-above {margin-top: 90px;}			/* These are used instead of needing to apply margin to elements which don't always need it */
.space-below {margin-bottom: 90px;}


/* MULTI-LEVEL MENU STYLES */

img.logoimg {
	width: 240px; 
	position: absolute; 
	overflow: visible; 
	margin-left: 5%; 
	top: 23px; 
	cursor: pointer;
	z-index: 1;
	-webkit-tap-highlight-color: transparent;
	} 

div.nav-toggle {
    padding: 7px;
    font-size: 270%;
	color: #fff;
	cursor: pointer;
	z-index: 3;
	position: absolute;
	right: 3vw;
	top: 4px;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	}

nav {
	display: none;					/* This is toggled on-off by the jQuery script to show-hide the menu in mobile mode */
	position: absolute;
	background: #ccc;
	top: 0px;
	height: 70px; 
	width: 100%;
	z-index: 2;
	background: #ddd;
	padding: 0px;
	margin: 0px;
} 
nav > * {background: #ccc;}

nav a { 							/* These styles apply to all <a> descendents of the <nav> */
	text-decoration: none;
	color: #fff;
	line-height: 38px;
	font-weight: bold;
	display: block;
	width: 100%;
	padding: 0px 0px 0px 20px;
	}
nav a:visited {color:#fff;}
nav a:hover {color: #e0fc9f; background-color: #ccc; text-decoration: none;}

nav ul {							/* This applies to all <ul> descendents of the <nav> */
	display: block;
	list-style: none;
	margin: 0px;
	padding: 30px 0px 20px 0px;		/* This gives the top and bottom buffer to the mobile menu. The apparent left buffer is done in the <a> tags' padding so the the <a> tags fill the full width re background colour */

}

nav ul li {    
	display: block;
}

nav ul li a {
}

	nav ul li ul {
		padding: 0px 0px 0px 0px;	/* This over-rides the ul padding next level up */
	}
	
	nav ul li ul li a {				/* These are the <a> in the second depth of the menu */
		padding-left: 40px;
	}



/* BASIC ROWS AND IMAGES */

.row {  background: transparent;
		display: block;
		margin: 0;
		position: relative;
        width: 100vw;										/* Does not use max width so that a background can be used in the full width of the row */
		padding: 60px 40px 60px 40px; 						/* Uses padding not margin so that a background can be used in the full width of the row */
	}
	

.header-background-image {  								/* The div which holds a page's header image*/
        height: 70vh;
		}

.full-width-background-image {  							/* Add to a row to define height where a full width image is background */
        height: 70vh;	
		}	


.content-image {margin: 0px -40px 0px -40px;				/* Gives full width image in mobile by 'undoing' the row padding c -ve margins and making it 100vw. */
				width: 100vw;								/* In large screen mode the negative margin is removed and width returned to '100%' */
	}

.flex {display: flex;}				/* Turns it into a flex countainer that can contain flex items */

.flex-image-item {order: 1;}		/* These are for flex containers where I have two columns: one flex item with an image and one flex item with text */
.flex-text-item {order: 2;}

.yellow-themed-flex-item {flex: 1; background: #f4f5e6;}
.photo-flex-item {flex: 1;}

/* HEADER STYLES */
h1, h2, h3 {clear: both; 
            font-family: 'Tilt Warp', Helvetica;
            margin: 0px;}
			
h1 {font-size: 160%; letter-spacing: 0px; word-spacing: -2px; line-height: 1.25;}
h1.over-image {font-size: 120%; color: #abb;}
h1.over-image-white {font-size: 5vw; color:#fff; font-weight: bold; position: absolute; bottom: 90px;}

	
h2 {font-size: 130%; color: #c6d309;}
h2.services {background: #d9df7a; color: #fff; border: 1px solid #edf485;}
h2.overimage {	font-size: 130%;
					color: #fff; 
					font-weight: bold;}
h2.subtitle { font-size: 150%; margin-top: 0px; padding-bottom: 40px;}
h2.subsection {	font-size: 160%; line-height: 1.5; margin-top: 40px; margin-bottom:30px; 
							border-bottom-color: #e0e0e0; border-bottom-style: solid; border-bottom-width: 1px;}
							
h3 {color: #7b8300; font-weight: 400; font-size: 120%; margin: 0px; padding: 50px 0px 0px 0px;}
    



/* lINKS. Note: no classless <a> styles are used because this prevents styles unintentionally slipping over into other a classes */
a.normal {color: #111; font-weight: bold; text-decoration: underline; text-decoration-color: #bbb;}		
a.normal:visited {color: #111; text-decoration-color: #bbb;}
a.normal:hover {color: #333; text-decoration: underline; text-decoration-color: #111;}
	
	
a.listing-title {
    color: #222; 
    font-family: 'Open Sans'; 
    font-size: 120%; font-weight: 800;
    text-decoration: none;  
    margin-bottom: 0px;
}
.listing-sub-title {
    display: block;
    clear: left;
    font-size: 75%;
}

a.featured {
    background: #3366ff; color: #fff; margin-top: 200px; padding: 3px 7px 3px 7px; border-radius: 5px;
    text-decoration: none;
}
a.featured-title {
    background: transparent; 
	text-decoration: none;
    display: block; margin-top: 15px;
    font-family: 'Open Sans'; font-size: 150%; color: #fff;}
a.featured-by {
    display: block; margin-top: 15px;
    font-family: 'Open Sans'; font-size: 85%; color: #fff; font-weight: bold; text-decoration: none;}
a.teasers {
	font-weight: normal;
    display: block;
    text-decoration: none;
    line-height: 1.7;
    color: #555;
    padding: 6px 0px 7px 0px; 
    margin-bottom: 25px; 
    border-bottom: 1px solid #f9f9f9;}




/* PARAGRAPH STYLES */
p {font-family: 'Lato', 'Merriweather'; font-weight: 300; font-size: 150%; font-size: 138%; line-height: 1.8;}
p.strong {font-weight: 700;}

p.overimage {font-size: 120%; color: #fff; font-weight: bold; width: 80vw;}
p.by-line {font-size: 85%; color: #555;}
p.footnote {font-size: 80%; margin-top: 60px; width: 90%; color: #555;}
p.leaders {font-size: 120%;}
p.large {font-size: 120%;}

p.testimonial {font-size: 110%; font-style: italic; width: 80%; margin: auto; text-align: center; padding-top: 50px; padding-bottom: 10px;}
p.testimonial-source {width: 100%; text-align: center; font-size: 110%; font-weight: bold; margin: auto;}

p.article-comment-byline {font-size: 80%; color: #555; margin-bottom: 0px;}
p.article-comment-content {width: 60%; color: #333; border-bottom-color: #f0f0f0; border-bottom-style: solid; border-bottom-width: 1px; margin-top: 0px; margin-bottom: 15; padding-bottom: 25px;}


ul.paragraph-style li {font-family: 'Lato', 'Merriweather'; font-weight: 300; font-size: 110%; line-height: 1.8; padding: 0px 0px 0px 0px;}
ul.paragraph-style li::marker {color: #d9e701;}




/* CONTENT STYLES */
p.photo-caption {width: 90%; font-size: 88%; font-weight: 300; margin: 0px 0px 30px 5px; padding-top: 0px;}



/* BUTTON STYLES */
.button {	display: block;
			width: 184px;
			font-size: .90em; 
			text-decoration: none;
			margin-left: auto;
			margin-right: auto;
			text-align: center; 
			border-radius: 4px; 
			padding: 8px 4px 8px 4px; 
			cursor: pointer; 
			border-style: solid; border-width: 1px; 
			transition-duration: 0.2s; 
			}
	.button-dark {background: #ccc; color: #777; border-color: #aaa; }
	.button-dark:hover {background: #fff; color: #222; border-color: #aaa;}

	.button-light {background: #ccc; color: #777; border-color: #bbb; }
	.button-light:hover {background: #fff; color: #222; border-color: #aaa;}

	.button-white {background: #fff; color: #333; border-color: #ddd; }
	.button-white:hover {background: #fff; color: #586640; font-weight: bold; border-color: #586640;}




/* FOOTER STYLES */
.footer-base {line-height: 3; min-height: 320px; text-align: center; font-size: .9em;}					/* gets added to a row div to center the text, give the row a min-height, and give the text elements a wider line-spacing */

a.footer {text-decoration: none; font-weight: 300; color: #777; display: block; -webkit-tap-highlight-color: transparent;}
a.footer:hover {text-decoration: none; text-decoration: underline; color: #444}
a.footer:visited {text-decoration: none; text-decoration: none; color: #777;}	

div.e-male {text-decoration: none; font-weight: 300; color: #777; cursor: pointer; -webkit-tap-highlight-color: transparent;}
div.e-male:hover {text-decoration: none; text-decoration: underline; color: #444;}
div.e-male:visited {text-decoration: none; text-decoration: none; color: #777;}				


/* OTHER STYLES */

.contact {}							/* A class to which the contact jQuery script attaches a function to email on click */

div.pricing-item {display: inline-block; width: 200px;}
div.pricing-price {display: inline-block;}

.padding-bottom {padding-bottom: 90px;}
















/* STYLES FOR >1000px SCREEN WIDTH */
@media only screen and (min-width: 1000px) {
	
.row {	padding: 60px 14vw 60px 14vw;
		}

	
.content-image {margin: 0px 0px 0px 0px;				/* Gives full width image in mobile by 'undoing' the row padding c -ve margins and making it 100vw. */
				width: 100%;								/* In large screen mode the negative margin is removed and width returned to '100%' */
	}










.header-background-image {  										/* The div which holds a page's header image*/
        height: 80vh;	
		}
		
.full-width-background-image {  									/* Add to a row to define height where a full width image is background */
        height: 60vh;	
		}	




/*content squares*/
.block {width: 22%; padding: 10px; margin: 0px 20px 0px 20px; height: 30vw; position: relative; top: 0px; border: 1px solid #ccc; overflow: hidden; transition: all 0.5s ease;}
.block:hover {margin: 0px 20px 0px 20px; border: 1px solid #fff;}
	.block h1 {font-size: 120%; color: #fff; transition: all 0.5s ease;}
	.block div {position: absolute; top: 2vw; transition: all 0.5s ease;}
	.block:hover div {}
	.block:hover h1 {color: #c4eb36;}

div.content-square {width: 400px; margin: 20px;}
div.content-square:hover {background: #ddd;}


/* HEADER STYLES */
h1 {font-size: 4.8vw;}
	h1.over-image-white {font-size: 5vw; color:#fff; font-weight: bold; position: absolute; bottom: 90px;}
h1.over-image {font-size: 500%;}
h2 {font-size: 300%;}
h2.over-image {	font-size: 4vw; margin: 0px;}
h2.subtitle { font-size: 150%; margin-top: 0px; padding-bottom: 40px;}

h3 {font-size: 138%;}


/* PARAGRAPH STYLES */
p {font-family: font-size: 138%; line-height: 1.8;}
p.strong {font-weight: 700;}

p.overimage {font-size: 120%; color: #fff; font-weight: bold; width: 80vw;}
p.by-line {font-size: 85%; color: #555;}
p.footnote {font-size: 80%; margin-top: 60px; width: 90%; color: #555;}
p.leaders {font-size: 120%;}
p.large {font-size: 120%;}

p.testimonial {font-size: 110%; font-style: italic; width: 80%; margin: auto; text-align: center; padding-top: 50px; padding-bottom: 10px;}
p.testimonial-source {font-size: 110%; font-weight: bold; margin: auto;}


p.article-comment-byline {font-size: 80%; color: #555; margin-bottom: 0px;}
p.article-comment-content {width: 60%; color: #333; border-bottom-color: #f0f0f0; border-bottom-style: solid; border-bottom-width: 1px; margin-top: 0px; margin-bottom: 15; padding-bottom: 25px;}








    


/* footer styles */
.footer h2 {margin-top: 0px;}


}/* close media query */