/*Stylesheet for www.zempertherapy.com 
Author: PB&J Marketing/M. Perez-Bastian
Create Date: 9-26-18
Last Update: 9-26-18 | 10-5-18 | 10-13-18 | 10-17-18 |10-23-18 | 12-11-18
*/
/*ZRT Site Colors & Fonts
	#d4470f rgb(212, 71, 15) Zemper Orange - Use for background, border, headline, controls, icons and/or other special text and/or items
	#d9d4ba rgb(217, 212, 186) Zemper Sand - Use for background, border, headline, controls, icons and/or other special text and/or items
	#282828 rgb(40, 40, 40) Charcoal Gray - Use for most body copy
	#808080 rgb(128, 128, 128) Medium Gray AKA HTML Gray - Use for drop shadows
	#d3d3d3 rgb(211, 211, 211) Light Gray AKA HTML LightGray - Use for special
	#f5f5f5 rgb(245, 245, 245) Very Light Gray AKA HTML WhiteSmoke - Use for special	
*/
/*Styles applied regardless of media type and/or size*/
html, body { 
	display: flex;
	flex-direction: column;
}
body {
	min-width: 310px;
	background-color: #d4470f; 	
	font-family: "Myriad Pro Condensed", Arial, Verdana, sans-serif; 
	font-size: 16px;
	color: #282828; 	
}	
/*
     * {
		transition: 1s ease-out;
	}
*/
	img {
		width: 100%;
	}
	a { 
		text-decoration: none;
	}
	.OuterContainer {
		flex: 1 100% auto;
		align-items: stretch;
		width: 100%;
		padding-bottom: 3.25em;
		margin: 0 auto;		
	}	
	#outerWrapper > * {	
		text-align: center; 
		padding: 0; 
		margin: 0; 		
	}
		.InnerContainer {
			flex: 1 100% auto;
			padding-top: 0;
			margin-top: 0;
		}
		#innerWrapper {
			display: flex;
			flex-direction: column;
			width: 100%;
			max-width: 1100px;
			text-align: center;
			background-image: url("../images/ZenGarden_600x450.jpg");
			background-repeat: no-repeat;
			background-size: 100%;
			padding: 0;
			margin: 0 auto;
		}
			.Hdr {
				flex: 1 100% auto;
				padding-top: 0;
				margin-top: 0;					
				margin-bottom: .25em;			
			}
				#banner {
					flex: 1 100% auto;
					background-image: url("../images/Banner.png");
					background-repeat: no-repeat;
					background-size: 100% 3.2em;
				}	
				.Ham {
					flex: 1 100% auto;
					padding-top: .15em;
					margin: 0 0 0 auto;
					float: right;
				}
					/* Add Zemper orange background color to the top navigation */
					.topnav {
						width: 7em;
						font-family: "Myriad Pro", Arial, Verdana, sans-serif;
						background-color: #d4470f; 
						padding: 0;
						margin: 0 0 0 auto;
						overflow: hidden;
					}
						/* Style the links inside the navigation bar */
						.topnav a {
							float: left;    
							display: block;
							color: #d9d4ba;
							text-align: left;
							padding: .25em;
							margin-bottom: .25em;
							text-decoration: none;
							font-size: 20px; /*1.25rem; */
						}				
							/* Change the color of links on hover */
							.topnav a:hover {
								background-color: #d9d4ba;
								color: #d4470f;
							}				
						
							/*.topnav a:touch {
								background-color: #d9d4ba;
								color: #d4470f;
							}*/
					/* Add an active class to highlight the current page */
					.active {
						background-color: #d4470f;
						color: #d9d4ba;
					}				
					/* Hide the link that should open and close the topnav on small screens */
					.topnav .icon {
						display: none;
					}						
					/* Add an active class to highlight the current page */
					.topnav .active {
						text-decoration: underline;
					}								
					.Logo {
						width: 35%;
						max-width: 8.5em;
						height: 100%;
						text-align: left;
						padding-bottom: 0;
						margin: 1.35em auto 0 .75em;
						float: left;
					}					
					#hdrPhone {
						display: flex;
						flex-direction: column;
						justify-content: center;
						width: 60%;
						padding: 0; 
						margin: 0 0 0 auto;
					}			
						#hdrPhone h3 { 
							flex: 1 100% auto;
							text-align: center;
							font-family: "Myriad Pro", Arial, Verdana, sans-serif;
							font-size: 16px; /* 1rem; */
							color: #d4470f;
							padding-right: 4px; /* .25em; */
							margin: 12px 0 0 auto; /* .75em 0 0 auto; */
						}
	.MainNav {
		flex: 1 100% auto;
		width: 40%;
		padding-right: 4px; /* .25em; */
		margin: 0 0 0 auto;
	}		
	#mNav {
		display: flex;	
		flex-direction: row;
		justify-content: flex-end; 
		width: auto;
		margin-right: 4px; /* .25em; */
		margin-top: 0;
	}
		.MainNav a { 
			width: auto;
			font-family: "Myriad Pro Condensed", Arial, Verdana, sans-serif;			
			font-size: 22px;
			color: #d4470f;
			padding: 4px 3px; /* .25em .3em; */
			outline: none;
		}	

		#mNav a:hover {
			color: #282828;
			text-decoration: underline;
			transition: none;
		}
		/*.MainNav .active { */
		#mNav .active {
			background-color: transparent;
			color: #777;
		}

			/*.NavBtn { */
			#homeBtn, #aboutBtn, #faqBtn, #contactBtn {
				width: auto;
				/* height: 22px; 1.5em;	*/ /*replaced em with rem for IE*/
				background-color: transparent;
				text-align: center;	
				font-family: "Myriad Pro Condensed", Arial, Verdana, sans-serif;				
				/*font-size: replaced em with rem for IE*/
				font-weight: bold;
				color: #d4470f;
				border: none;	
				padding: 3px 0 2px 0; /*.2em 0 .1em 0; */
				margin: 0 2px; /* 0 .15em; */
				outline: none;
			}			

	.Main {
		display: flex;
		flex-direction: column;
		width: 99%;
		text-align: center;
		padding: 0 0 .25em 0;
		margin: 0 auto;
	}							
		#headline {
			width: 100%;
			text-align: center;
			padding: .25em 0 0 0;
			margin: 0 auto .25em auto;
		}
			#headline h1 {
				width: auto;
				font-family: "Myriad Pro Condensed", Arial, Verdana, sans-serif;
				font-size: 20px; /* 1.25em; */
				color: #282828;
				padding: 0;
				margin: 0 auto;
				text-shadow: .01em .01em #808080;
			}	
		#mainCopy {
			width: auto;
			padding: .25em .25em .1em .25em;
			margin: 0 auto;
		}
			#mainCopy p {
				width: 100%;
				font-family: "Myriad Pro Condensed", Arial, Verdana, sans-serif;
				text-align: left;
				font-size: 16px; /* 1em; */
				color: #000;
				padding: 0 0 0 4px; /* 0 0 0 .25em; */
				margin: 0 auto;
				text-shadow: .01em .01em #d3d3d3;
			}				
	.TabSection {
		flex: 1 100% auto;
		width: 100%;
		max-width: 46em;
		padding: 0;
		margin: 0 auto;
	}
		.TabNav {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: stretch;
			width: 100%;
			padding: 0;
			margin: 0 auto;
		}
			.TabBtns_Mobile {
				display: flex;
				flex-direction: row;
				text-align: center;	
				flex-wrap: nowrap;
				outline: none;
			}	
			.TabBtns {
				display: none;
				flex-direction: row;
				text-align: center;	
				flex-wrap: nowrap;
				outline: none;
			}			
				button {
					flex: 1 100% auto;
					flex-wrap: wrap;
					width: 25%;								
					height: auto;
					background-color: #f5f5f5;				
					text-align: center;
					font-family: "Myriad Pro Condensed", Arial, Verdana, sans-serif;
					font-size: 16px; /* 1em; */
					color: #d4470f;
					padding: 8px 2px 0 2px; /* .5em .15em 0 .15em; */
					margin: 0 auto;
					border-top: .05em solid #808080;
					border-right: .05em solid #808080;
					border-bottom: .05em solid #808080;
					border-left: .05em solid #808080;
					-webkit-border-radius: .9375em .9375em 0 0;
					-ms-border-radius: .9375em .9375em 0 0;
					-moz-border-radius: .9375em .9375em 0 0;
					-o-border-radius: .9375em .9375em 0 0;
					border-radius: .9375em .9375em 0 0;
					outline: none;
				}			
				.TabBtns button:hover {
					color: #808080;						
				}
				.TabBtns_Mobile button:touch {
					color: #808080;
				}
				.selected {					
					border-bottom: none;		
				}	
		.TabFolders {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex-wrap: nowrap;
			width: 100%;
			padding: 0; 
			margin: 0;
		}
			.Folder {	
				flex: 1 100% auto;
				background-color: #f5f5f5;
				font-family: "Myriad Pro Light", Arial, Verdana, sans-serif;
				text-align: left;
				font-size: 14px; /* .9em; */
				border-right: .05em solid #808080;
				border-bottom: .05em solid #808080;
				border-left: .05em solid #808080;
				padding: 0 .75em .15em 1em;
				margin: 0 auto .15em auto;
				-webkit-border-radius: 0 0 .75em .75em;
				-ms-border-radius: 0 0 .75em .75em;
				-moz-border-radius: 0 0 .75em .75em;
				-o-border-radius: 0 0 .75em .75em;
				border-radius: 0 0 .75em .75em;	
			}					
			#restFolder {
				display: block;
			}
				#restFolder p {}
				#restFolder ul {
					margin-left: -1em;
				}
			#myoFolder {	
				display: none;
			}
				#myoFolder p {}
			#artFolder {
				display: none;
			}
				#artFolder p {}
			#injFolder {
				display: none;
			}
				#injFolder p {}						
	.Footer {	
			flex: 1 0 auto;
			width: 100%;
			background-color: #d4470f;
			color: #d9d4ba;
			bottom: 0;
			position: fixed;
	}
		.FtrTop {
			display: flex;
			flex-direction: column;
			padding: .25em 0 0 0;
			margin: 0 auto;
		}							
			.Address {					
				flex: 1 100% auto;
				padding: 0;
				margin: 0 auto;
			}	
				.Address p { 	
					width: 100%;
					text-align: center; 
					font-size: 17px; /* 1.05em; */
					font-style: normal;
					color: #d9d4ba; 	
					padding: 0; 
					margin: 0 auto; 
					text-shadow: .01em .01em #808080;
				}
			#soc {
				text-align: center;
			}
			#soc p {
				font-size: 20px; /* 1.2em; */
				padding-bottom: 0;
				margin-top: 0;
				margin-bottom: 0;
			}
				#soc img {
					width: 1.5em;
				}				
		.FtrBot{
				display: flex;
				flex-direction: row;
				text-align: center;			
				font-size: 12px; /* .75em; */
				padding: .15em 1em .1em .5em;
				margin: 0 auto;	
			}
			.Copyright {
				flex: 1 100% auto;			
				width: 100%;
				text-align: left;
				padding-top: 0;
				margin: 0;
			}			
				.Copyright p { 
					width: 100%;
					padding: 0;
					margin-top: 0;
					margin-bottom: 0;
				}			
			.LastUpdate {
				flex: 1 100% auto;
				width: 100%;
				text-align: right;
				padding: 0;
				margin: 0;
			}
				.LastUpdate p { 
					font-style: none;
					padding: 0;
					margin-top: 0;
					margin-bottom: 0;
				}
@media screen and (min-width: 320px) and (max-width: 600px ) and (orientation: portrait) {
	#innerWrapper {
		background-image: url("../images/ZenGarden_375x339.jpg");
        background-size: 115%;
	}
	.MainNav {
		display: none;
	}
	.TabFolders {
		padding-bottom: .5em;
		margin-bottom: 2em;
	}
}

@media screen and (min-width: 320px) and (max-width: 600px) and (orientation: landscape) {
	#innerWrapper {
		background-image: url("../images/ZenGarden_600x450.jpg");
	}
	.MainNav {
		display: none;
	}
	.TabFolders {
		padding-bottom: .5em;
		margin-bottom: 2em;
	}
}	

@media screen and (max-width: 600px) {
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
	.topnav a:not(:first-child) {
		display: none;
	}
	.topnav a.icon {
		float: right;
		display: block;
		margin: 0 0 0 auto;
	}
	.MainNav {
		display: none;
	}
        #mainCopy p {
                font-family: "Myriad Pro Condensed", Arial, Verdana, sans-serif;
                font-size: 17px; /* 1.05em; */
        }
	.TabBtns {
		display: none;
	}
	.TabBtns_Mobile {
		display: flex;
	}
	.TabFolders {
		padding-bottom: .5em;
		margin-bottom: 2em;
	}
}
	
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
	.topnav.responsive {
		position: relative; 
	}
	.topnav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
	}
}

@media screen and (min-width: 600px) {
	#innerWrapper {
		background-image: url("../images/ZenGarden_800x600.jpg");
	}
	.Hdr {
		margin-bottom: 0;	
	}
	#banner {
		background-size: 100% 4em;	
		padding-bottom: 1.5em;
		margin-bottom: 0;
	}
	.Ham {
		display: none;
	}
	.Logo {
		width: 32%;
		max-width: 8.5em;
		margin: 1.75em auto 0 2em;			
	}	
	#hdrPhone {
		width: 40%;
		padding-top: .25em;
		padding-bottom: 0;
		margin: 0 0 0 auto;
	}
	#hdrPhone h3 {		
		width: 100%;
		font-size: 17px; /* 1.05rem; */
		font-family: "Myriad Pro Light", Arial, Verdana, sans-serif;
		color: #d9d4ba;
		padding: 0;
		margin: 0;
	}
	.MainNav {
		width: 48%;
	}
	.MainNav a {
		width: auto;
		font-size: 22px;
		color: #d4470f;
		padding: 4px 0;
		margin: 0;
		outline: none;
	}	
	/*.NavBtn { */
	/*#mNav a { */
	#homeBtn, #aboutBtn, #faqBtn, #contactBtn {
		width: auto;
		/*height: 1.5em;*/	/*replaced em with rem for IE*/
		background-color: transparent;
		text-align: center;	
		font-family: "Myriad Pro Condensed", Arial, Verdana, sans-serif;				
		/* 1.2rem; */  /*replaced em with rem for IE*/
		font-weight: bold;
		color: #d4470f;
		border: none;	
		padding: 3px 0 2px 0; /* 3px 0 2px 0; */ /* .2em 0 .1em 0; */
		margin: 0 4px; /* 0 .15rem; */
		outline: none;
	}		
	.Main {
		padding: 0 0 .5em 0;
		margin: 1.25em auto 0 auto;
	}
		#headline h1 {
			font-family: "Myriad Pro", Arial, Verdana, sans-serif;
			font-size: 24px; /* 1.5rem; */
			font-weight: bold;
			text-shadow: none;
			padding-bottom: 4px; /* .25em; */
		}	
		#mainCopy p {
			width: auto;
			text-align: left;
			font-family: "Myriad Pro Condensed", Arial, Verdana, sans-serif;
			font-size: 17px; /* 1.05rem; */
			text-shadow: .01em .01em #fff;	
			padding: 0 6%;
		}
		.TabSection {
			padding-bottom: 1em;
		}	
		.TabBtns_Mobile {
			display: none;
		}
		.TabBtns {
			display: flex;
		}
		.TabBtns button {
			font-family: "Myriad Pro Condensed", Arial, Verdana, sans-serif;
			font-size: 17px; /* 1.05rem; */
			padding: 8px 8px 0 8px; /* .5em .5em 0 .5em; */
		}	
		.TabFolders {		
			font-size: 15px; /* .95rem;	*/
			padding-bottom: 8px; /* .5em; */
			margin-bottom: 24px; /* 1.5em; */
		}
		.Folder {
			font-size: 15px; /* .95rem; */
			height: auto;
			padding: .1em 3em .5em 3em;
			margin: 0 auto .25em auto;
		}	
}

@media screen and (min-width: 700px) {
	.Logo {
		width: 31%;			
		max-width: 9em;
		margin: 2em auto 0 2.5em;
	}
	.MainNav {
		width: 40%;
	}	
	#mNav {
		margin-top: .25em;
	}	
		#homeBtn, #aboutBtn, #faqBtn, #contactBtn {
			width: auto; 
		}
	.Main {
	}	
		#headline h1 {
			font-size: 27px; /* 1.7rem;	*/
		}
		#mainCopy p {
            font-family: "Myriad Pro", Arial, Verdana, sans-serif;
			font-size: 18px; /* 1.15rem; */
			text-shadow: .01em .01em #fff;	
			padding: 0 8%;
		}		
}

@media screen and (min-width: 800px) {	
	#innerWrapper {
		background-image: url("../images/ZenGarden_1200x900.jpg");
	}
	.Logo {
		width: 30%;
		max-width: 9.75em;
		margin: 2.1em auto 0 4em;
	}
	.MainNav {
		width: 50%;
		margin-right: 12px; /* 1em; */
	}	
	#mNav {
		margin-top: .25em;
	}	
	.Main {
	}	
		#headline h1 {
			font-size: 28px; /* 1.75em; */
			padding-bottom: 16px; /*1em; */
		}	
		#mainCopy p {
			padding: 0 12%;
		}
		.TabSection {
			max-width: 46em;
			padding-bottom: 1em;
		}
		.TabBtns button {
			padding: .5em .5em 0 .5em;
		}	
		.TabFolders {		
			font-size: 16px; /* 1em; */
		}
		.Folder {
			/*height: auto;
			max-height: 18em;
			padding: .1em 3em .5em 3em;*/
			overflow-y: scroll;
		}		
}

@media screen and (min-width: 1000px) {
	#banner {
		background-size: 100% 4.75em;	
		padding-bottom: 2.5em;
	}
	.Logo {
		width: 29%;			
		max-width: 10.75em;
		margin: 2.15em auto 0 7.25em;
	}
	.MainNav {
		width: 40%;
		margin-top: 8px; /* .5em; */
		margin-right: 16px; /* 2em; */
	}		
	#mNav {
		margin-top: .25em;
	}		
	.Main {
		padding-top: .5em;
		padding-bottom: 1.25em;
	}
		#headline h1 {
			font-size: 33px; /* 2.1em; */
			padding-bottom: 8px; /*.5em;*/
		}
		#mainCopy p {
			font-family: "Myriad Pro Light", Arial, Verdana, sans-serif;
			font-weight: bold;
			padding: 0 16%;
			text-shadow: none;
		}		
}