/*	Contents copyright Phase One Website Design & Hosting
	https://www.phaseonewebsitedesign.com/
*/

/* Changes directly to or styles based on the Skeleton Stylesheet */
.container-teal {
	background-color:#37929e;
	box-sizing:border-box;
	/*position:relative;*/
	margin:0 auto;
	/*max-width:960px;*/
	width:100%;
	padding:0 20px;
}

.container-white {
	background-color:#fff;
	box-sizing:border-box;
	position:relative;
	margin:0 auto;
	max-width:1000px;
	width:100%;
	padding:0 20px;
}


/* ****************************************** */
/* ******* Colors *************************** */
/* 
	#83d2bf 131,210,191, Light green of the paw print in the header
	#ccffcc 204,255,204, Light Green
	#99ffcc 153,255,204, Light Green, slightly darker
	#66cc00 102,204,000, Mid-Green
	#339933 051,153,051, Mid-Green, darker
	#4f964d 079,150,077, Mid-Green, darker & muted
	#009900 000,153,000, Dark Green
	#006600 000,102,000, Very dark Green
*/


/* ****************************************** */
/* ******* Typography *********************** */

/* Change the width & height of a font: transform:scale(.5, 1); .5 is the x dimension & 1 is the y dimension */

/* ******* Web Fonts ************************ */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
/* Great free fonts website: https://www.onlinewebfonts.com/fonts */
@font-face {
	font-family:'ErnestineWeb W03 Light';
	src:url('webfonts/a6057a197e3bb0828443d5b3737b1ce8.eot');
	src:url('webfonts/a6057a197e3bb0828443d5b3737b1ce8.eot?#iefix')format('embedded-opentype'),
	url('webfonts/a6057a197e3bb0828443d5b3737b1ce8.woff2')format('woff2'),
	url('webfonts/a6057a197e3bb0828443d5b3737b1ce8.woff')format('woff'),
	url('webfonts/a6057a197e3bb0828443d5b3737b1ce8.ttf')format('truetype'),
	url('webfonts/a6057a197e3bb0828443d5b3737b1ce8.svg#ErnestineLight')format('svg');
	font-weight:normal;
	font-style :normal;
	font-display:swap;
}

h1 {color:#000; font-family:'ErnestineWeb W03 Light', Helvetica, Arial, sans-serif; font-size:43px;}
h1.white {color:#fff; font-family:'ErnestineWeb W03 Light', Helvetica, Arial, sans-serif; font-size:43px;}
h2 {color:#000; font-family:'ErnestineWeb W03 Light', Helvetica, Arial, sans-serif; font-size:43px;}
h2.white {color:#fff; font-family:'ErnestineWeb W03 Light', Helvetica, Arial, sans-serif; font-size:43px;}
h3 {color:#000; font-family:'ErnestineWeb W03 Light', Helvetica, Arial, sans-serif; font-size:24px;}
h3.white {color:#fff; font-family:'ErnestineWeb W03 Light', Helvetica, Arial, sans-serif; font-size:24px;}
h4 {color:#000; font-family:'ErnestineWeb W03 Light', Helvetica, Arial, sans-serif; font-size:20px;}
h4.white {color:#fff; font-family:'ErnestineWeb W03 Light', Helvetica, Arial, sans-serif; font-size:20px;}

.lrgCap {font-size:120%;}

p {font-size:120%;}

/* ****************************************** */
/* ******* Images ********************* */

.img-border-white {border:4px solid white;}
.img-border-teal  {border:4px solid #37929e;}
/*.img-responsive {box-sizing:border-box; max-width:600px;}*/
.img-responsive {box-sizing:border-box; max-width:100%;}


/* ****************************************** */
/* ******* Miscellaneous ******************** */

.hrWhite {color:#fff; border-top:1px solid #fff; margin-top:-10px; width:50%;}
.hrGrey  {color:#ddd; border-top:1px solid #ddd; margin-top:-10px;}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

@media (max-width:800px) {
	.paragraphNarrow {display:block; margin-left:auto; margin-right:auto; width:100%;}
}
@media (min-width:801px) {
	.paragraphNarrow {display:block; margin-left:auto; margin-right:auto; width:60%;}
}
@media (max-width:600px) {
	.galleryLrg {display:none;}
	.gallerySml {}
}
@media (min-width:601px) {
	.galleryLrg {}
	.gallerySml {display:none;}

}


/* Larger than mobile */
@media (min-width:400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width:550px) {}

/* Larger than tablet */
@media (min-width:750px) {}

/* Larger than desktop */
@media (min-width:1000px) {}

/* Larger than Desktop HD */
@media (min-width:1200px) {}