body {
    color: #595a5a;
    background-color:#595959;
}
/***********added ***********/
p{font-size:1.125em;}
.content {line-height:1.25em} 


1.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
#menu2,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.menu2-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

/*This is the image data.*/
img {
border:0;
height: 300px;
width: 300px;
padding-bottom: 2em;
}


/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
    position: relative;
    padding-left: 200px;
	padding-right: 200px;
}
    #layout.active {
        position: relative;
        left: 200px;
    }
        #layout.active #menu {
            left: 200px;
            width: 200px;
        }

        #layout.active .menu-link {
            left: 200px;
        }
		
		#layout.active #menu2 {
            right: 150px;
            width: 150px;
        }

        #layout.active .menu2-link {
            right: 150px;
        }
/*
The content `<div>` is where all your content goes.
*/
.image img {
	float: left;
	width: 250px;
	height: 50%;
	padding-right: 20px;
}

.content {
   margin: 0 auto;
    padding: 2em;
    max-width: 800px;
    line-height: 1.6em;
}

.header {
     margin: 0;
     color: #333;
	 background-color: #c3d5c3;
     text-align: center;
     padding: 2.5em 2em 0;
 }
    .header h1 {
        margin: 0.2em 0;
        font-size: 3em;
        font-weight: 300;
    }
     .header h2 {
        font-weight: 300;
        color: #ccc;
        padding: 0;
        margin-top: 0;
    }

.content-subhead {
    font-weight: 300;
    color: #595a5a;
}




/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/

#menu {
    margin-left: -200px; /* "#menu" width */
	text-align: center;
    width: 200px;
	height: 350px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000; /* so the menu or its navicon stays above all content */
    background: #595959;
	opacity: .90;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#leftpics{
  	margin-left: -200px; /* "#menu" width */
	text-align: center;
    width: 200px;
	position:absolute;
    z-index: 100; /* so the menu or its navicon stays above all content */
    background: #595959;
	opacity: .75;
	top:350px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;}

#leftpics img{max-width:200px;
				display:block;
				padding-bottom: 1.455em;}
				
#leftside{background:#595959;
			max-height:100%;}

	#menu img {
	height: 75px;
	width: auto;
	padding: 0;
	}
	
	
	a {
  text-decoration: underline;
}


.sidetest {
color:#C3D5C3;
margin-left:auto;
margin-right:auto;
padding:.8em;
font-size:1em;
}

.belowtest{padding-top:2em;}

.highlight{
background-color:#C3D5C3;
margin-right:auto;
margin-left:auto;
padding:1.5em;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
margin-bottom: 1em;
margin-right:.25em;
margin-left:.25em;}


#tippytop{background-color:#c3d5c3;}
#howbkgd{background-color:#b4cab4;}
#testbkgd{background-color:#a5c0a5;}
#FAQbkgd{background-color:#96b596;}
#contactbkgd{background-color:#87aa87;}

#footer {

    margin-left:auto;
    margin-right:auto;
     color: #333;
	 background-color: #78a078;
     text-align: center;
     padding: 2.5em 2.5em;
 }
 
 
 #mainlogo img{max-height:175px;
 			width:auto;}
 			
 #center {text-align:center;}
 
 .back {margin-right:auto;
margin-left:auto;
padding:1.5em;
}

.color {background-color:#C3D5C3;
margin-right:auto;
margin-left:auto;
padding:1.5em;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
margin-bottom: 1em;}

#quoteL{
font-family: 'Revalia', cursive;
margin-right:80%;
font-size:5em;
transform:scaleX(-1);}
#quoteR{
font-family: 'Revalia', cursive;
text-align:right;
margin-right:12.5%;
font-size:5em;}



	
    /*
    All anchors inside the menu should be styled like this.
    */
    #menu a {
        color: #C3d5c3;
        border: none;
        padding: 0.6em 0 0.6em 0.6em;
    }

    /*
    Remove all background/borders, since we are applying them to #menu.
    */
     #menu .pure-menu,
     #menu .pure-menu ul {
        border: none;
        background: transparent;
    }

    /*
    Add that light border to separate items into groups.
    */
    #menu .pure-menu ul,
    #menu .pure-menu .menu-item-divided {
        border-top: 1px solid #333;
    }
        /*
        Change color of the anchor links on hover/focus.
        */
        #menu .pure-menu li a:hover,
        #menu .pure-menu li a:focus {
            background: #333;
        }

    /*
    This styles the selected menu item `<li>`.
    */
    #menu .pure-menu-selected,
    #menu .pure-menu-heading {
        background: #777;
    }
        /*
        This styles a link within a selected menu item `<li>`.
        */
        #menu .pure-menu-selected a {
            color: #fff;
        }

    /*
    This styles the menu heading.
    */
    #menu .pure-menu-heading {
        font-size: 110%;
        color: #b4cab4;
        margin: 0;
		text-align: center;
    }
	
	/*---------------------------------------------*/
	
	/*
The `#menu2` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the right side of the page.
*/

#menu2 {
    margin-right: 0px; /* "#menu2" width */
    width: 200px;
    position: absolute;
    top: 0;
    right: -200px;
    bottom: 0;
    z-index: 1000; /* so the menu or its navicon stays above all content */
    background: #595959;
	opacity: .75;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
    /*
    All anchors inside the menu should be styled like this.
    */
    #menu2 a {
        color: #999;
        border: none;
        padding: 0.6em 0 0.6em 0.6em;
    }

    /*
    Remove all background/borders, since we are applying them to #menu.
    */
     #menu2 .pure-menu,
     #menu2 .pure-menu ul {
        border: none;
        background: transparent;
    }

    /*
    Add that light border to separate items into groups.
    */
    #menu2 .pure-menu ul,
    #menu2 .pure-menu .menu-item-divided {
        border-top: 1px solid #333;
    }
        /*
        Change color of the anchor links on hover/focus.
        */
        #menu2 .pure-menu li a:hover,
        #menu2 .pure-menu li a:focus {
            background: #333;
        }

    /*
    This styles the selected menu item `<li>`.
    */
    #menu2 .pure-menu-selected,
    #menu2 .pure-menu-heading {
        background: #777;
    }
        /*
        This styles a link within a selected menu item `<li>`.
        */
        #menu2 .pure-menu-selected a {
            color: #fff;
        }

    /*
    This styles the menu heading.
    */
    #menu2 .pure-menu-heading {
        font-size: 110%;
        color: #b4cab4;
        margin: 0;
		text-align: center;
    }
    
    h1,h2,h3,h4,h5,h6 {color:#595a5a;}

/* -- Dynamic Button For Responsive Menu -------------------------------------*/

/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/

/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
    position: fixed;
    display: block; /* show this only on small screens */
    top: 0;
    left: 0; /* "#menu width" */
    background: #000;
    background: rgba(0,0,0,0.7);
    font-size: 10px; /* change this value to increase/decrease button size */
    z-index: 10;
    width: 2em;
    height: auto;
    padding: 2.1em 1.6em;
}

    .menu-link:hover,
    .menu-link:focus {
        background: #000;
    }

    .menu-link span {
        position: relative;
        display: block;
    }

    .menu-link span,
    .menu-link span:before,
    .menu-link span:after {
        background-color: #fff;
        width: 100%;
        height: 0.2em;
    }

        .menu-link span:before,
        .menu-link span:after {
            position: absolute;
            margin-top: -0.6em;
            content: " ";
        }

        .menu-link span:after {
            margin-top: 0.6em;
        }
        
        
        
a:link {
  color: #fff;
}

a:visited {
  color: #C3D5C3;
}

a:focus {
  color: #C3D5C3;
}

a:hover {
  color: #000;
}
 
a:active {
  color: #C3D5C3;
  font-style: italic;
}

.pop{font-size:2em;
	color:#ffffff;}
	
#mainlogo img{max-height:200px;
 			width:auto;}
 			
 #center {text-align:center;}
 
 

 
 	
		
/* -- Responsive Styles (Media Queries) ------------------------------------- */

@media (max-width: 48em) {
	#menu2 {
	display: none;
	}
	
	.image {
	display: none;
	}
	
	#layout {
	padding-left: 0px;
	padding-right: 0px;
	}
	
	img {
	height: 150px;
	width: 150px;
	}
	
	#leftpics {
	display: none;}
	
	#footer {max-width:100%;}
	
	1.content {font-size:3em;
	width:100%;
	}
	
	#bigtest{display:none;}
	
	body {background-color:transparent;}
}

.toolong{font-size:.8em;
max-width:100%;
}



/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 50em) {

    .header  {
        padding-left: 2em;
        padding-right: 2em;
		min-height: 25%;
	}
	.content {
        padding-left: 2em;
        padding-right: 2em;
		min-width: 25%;
    }

    #layout {
        padding-left: 200px; /* left col width "#menu" */
		padding-right: 200px;
		right: 0;
        left: 0;
    }
	
    #menu {
        left: 200px;
    }
	
	#menu2 {
        right: 0px;
    }

    .menu-link {
        position: fixed;
        left: 200px;
        display: none;
    }

    #layout.active .menu-link {
        left: 200px;
    }
    
    #smalltest{display:none;}
    

}



@media (max-width:980px)
{
#bigtest{display:none;}
#smalltest{display:block;}