@charset "UTF-8";
/* CSS Document */

html {/*scroll-behavior: smooth;*/
		
		font-family: "Helvetica Neue", Arial, sans-serif;
	}

body {	  height: 100vh;
    	width: 100vw;
		padding: 0px;
		margin: 0px; }

.top_bar_box {background-color: #66662c; height: 40px; position: fixed; top: 0px; z-index: 99; width: 100%; text-align: center;}

.top_bar_wrap {width: 400px; margin: 0px auto;}

.top_bar_text {text-align: center; display: inline-block; color: #ffffff; font-weight: 700; margin: 10px 0px 0px 0px;}

.off-screen-menu {
	background-color: #d3d4bb;
	width: 100%;
	position: fixed;
	top:130px;
	left: 0px;
	margin: 0px;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	transition: 2s ease;
}

.off-screen-menu ul{
  list-style-type: none;

}

.off-screen-menu.active { display: flex;}

nav { padding-right: 20px;
	padding-top: 10px;
		display: none;
		background-color: #d3d4bb;}


.ham-menu { 
	height: 50px;
	width: 50px;
	margin-left: auto;
	position: relative;
}

.ham-menu span {
	
	height: 5px;
	width: 100%;
	background-color: #66662c;
	border-radius: 25px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: 2s ease;
}

.ham-menu span:nth-child(1) {
	top: 25%
}

.ham-menu span:nth-child(3) {
	top: 75%
}

.ham-menu.active span:nth-child(1) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.ham-menu.active span:nth-child(2) {
	opacity: 0;
}

.ham-menu.active span:nth-child(3) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Create a sticky/fixed navbar */
#navbar {
  overflow: hidden;
  background-color: #d3d4bb;
  padding: 5px 10px; /* Large padding which will shrink on scroll (using JS) */
  transition: 0.4s; /* Adds a transition effect when the padding is decreased */
  position: fixed; /* Sticky/fixed navbar */
  width: 100%;
  top: 40px; /* At the top */
  z-index: 99;
}

/* Style the navbar links */
#navbar a {
  float: left;
  color: #65662c;
  text-align: center;
  padding:12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo */
#navbar #logo {
  font-size: 35px;
  font-weight: bold;
  transition: 0.4s;
	padding: 0px;
}

/* Links on mouse-over */
#navbar a:hover {
 
  color: #65662c;
	font-weight: 700;
	text-decoration: underline;
}

/* Style the active/current link */
#navbar a.active {
  text-decoration: underline;
  color: #65662c;
	font-weight: 700;
}

/* Display some links to the right */
#navbar-right {
  float: right;
	padding-right: 40px;
	padding-top: 10px;
}

#about{
	scroll-margin-top: 100px;
}

#services{
	scroll-margin-top: 100px;
}

#contact{ 
scroll-margin-top: 100px;
}

.bgimg {
  /* Background image */
  background-image: url("../images/MindfulPath_Background.jpg");
  /* Full-screen */
  
	height: 100vh;
  /* Center the background image */
  background-position: center;
  /* Scale and zoom in the image */
  background-size: cover;
  /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
  position: relative;
  /* Add a white text color to all elements inside the .bgimg container */
  color: white;
  /* Add a font */
  font-family: "Courier New", Courier, monospace;
  /* Set the font-size to 25 pixels */
  font-size: 25px;
}

/* Position text in the top-left corner */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}

/* Position text in the bottom-left corner */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}

/* Position text in the middle */
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
	font-family: "Helvetica Neue", Arial, sans-serif;
	
}

.middle h1 {font-family: "Charmonman", cursive;
				margin: 0px;}

.middle p {font-weight: 400;}

/* Style the <hr> element */
hr {
  margin: auto;
  width: 40%;
}

a { color: #ffffff;
	text-decoration: none;}

.contact_button{ display: inline-block;border-radius: 5px; background-color: #d3d3ba; margin: 0px 0px 0px 10px;}

.contact_button:hover{ font-weight: 700;}

.contact_button p{color: #66662c; margin: 4px 8px; padding: 0px;}


.contact { border-top: 6px solid #d3d4bb;
	background-image: url("../images/mp_map.jpg");
	min-height: 92vh;
	margin: -4px 0px 0px 0px;
	color: #65662c;
	display: flex; 
	padding: 0px;
		
}

/*section{ scroll-margin-top: 120px;}*/

.contact_column{width: calc(100% / 3);}

.contact_form_back{background-color: #d3d3ba; padding: 10px; margin: 60px 0px;}

.contact_form_wrap{border: 2px solid #ffffff; padding: 20px 20px;}

.contact_info_box{background-color: #d3d3ba; padding: 10px; margin: 60px; overflow: hidden;}

.contact_info_wrap{border: 2px solid #ffffff; padding: 20px 20px;}

.footer_box{background-color: #d3d3ba; height: 100px; overflow: hidden; margin:  0px 0px 0px 0px;} 

.footer_link{height: 70px; margin: 10px 40px; float: left;}

.footer_copy{text-align: center; display: inline; margin: 20px; line-height: 25px;}

.footer_copy_text{margin: 0px 0px 0px -70px; padding: 0px; color: #66662c;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

.form_button {
  background-color: #65662c;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
	 color: #ffffff; 
	font-weight: 600; 
}

.headshot{width: 300px; margin: 60px 0px -130px 0px;}

.image_holder{ margin: 0px auto;text-align: center;}

.bio_box{background-color: #d3d4bb; padding: 10px; margin: 0px 40px 40px 40px;}

.bio_cont{border: 2px solid #ffffff; color: #65662c; padding: 0px 80px 40px 80px;}

.bio_name{text-align: center; font-size: 32px; margin: 110px 0px 10px 0px; padding: 0px;}

.bio_title{text-align: center; font-size: 22px; font-weight: 400; margin: 0px 0px 40px 0px; padding: 0px;}

.bio_text{font-size: 22px;}

.service_cont1{display: flex; margin: 0px; padding: 0px; justify-content: center;}

.service_cont2{display: flex; margin: -4px 0px 0px 0px; padding: 0px;}

.service_image_box{width: calc(100% / 3);}

.service_image{width: 100%;}

.service_tip_box{text-align: center; width: calc(100% / 3); overflow: hidden;}

.service_tip1{text-align: center; margin: 20px auto 0px auto;}

.service_tip_image{width: 160px; margin: 0px auto;}

.service_tip_text{margin: 0px 40px; color: #65662c;}

.service_tip2{text-align: center; width: 210px; margin: 40px auto 0px auto;}



input[type=submit]:hover {
  background-color: #65662c;
	font-weight: 700;
}

.text1{ font-family: "Charmonman", cursive;
  font-weight: 600;
  font-style: normal;
	font-size: 42px;
	margin: 0px;
text-align: center;
color: #65662c;}

.text2{ font-family: "Charmonman", cursive;
  font-weight: 600;
  font-style: normal;
	font-size: 42px;
	margin: 0px;
text-align: center;}

.text3{ font-family: "Charmonman", cursive;
  font-weight: 600;
  font-style: normal;
	font-size: 42px;
	margin: 0px;
}

@media screen and (min-width:1001px) and (max-width:1299px){
	
	.service_tip_image { width: 80px;}
	
	.text1 {font-size: 28px;}
	
	.service_tip_text { font-size: 12px;}
	
	.headshot { width: 220px;
				margin: 60px 0px -110px 0px;}
	
	.bio_name {
		margin: 100px 0px 10px 0px;
	}
	
	.bio_title { margin: 0px 0px 30px 0px;}
	
	.bio_text {font-size: 18px;}
	
	.contact { display: block;
				overflow: hidden;}
	
	.contact_column { width: 100%;}
	
	.contact_form_back { margin: 60px 20px}
	
	.contact_info_box { margin: 60px 20px;
						text-align: center;}
	
	
}

@media screen and (min-width:701px) and (max-width:1000px){
	.service_cont1{ display: block;}
	
	.service_image_box { width: 100%;}
	
	.service_cont2{ display: block;}
	
	.service_tip_box { width: 100%;
				margin-bottom: 40px;}
	
	.contact { display: block;
				overflow: hidden;}
	
	.contact_column { width: 100%;}
	
	.contact_form_back { margin: 60px 20px}
	
	.contact_info_box { margin: 60px 20px;
						text-align: center;}
	
}
	
	

/* Add responsiveness - on screens less than 700px wide, display the navbar vertically instead of horizontally */
@media only screen and (max-width: 700px) {
  
	#navbar {
    padding: 10px 10px !important; /* Use !important to make sure that JavaScript doesn't override the padding on small screens */
  }
  #navbar #logo {
    float: left;
    display: block;
    text-align: left;
  }
  #navbar-right {
    float: none;
  }
	
	.top_bar_wrap { width: 100%;}
	
 .bgimg { height: 80vh;}
	
	nav {display: flex;}
	
	
	#navbar-right { display: none;}
	
	.off-screen-menu a {float: none;}
	
	.middle { top: 60%;}
	
	.middle p { font-size: 18px;}
	
	.headshot{width: 200px;
				    margin: 60px 0px -100px 0px;}
	
	.bio_name {    margin: 90px 0px 10px 0px;}
	
	.bio_title { font-size: 20px;}
	
	.bio_text { font-size: 20px;}
	
	.bio_cont {padding: 0px 40px 40px 40px}
	
	.service_cont1{ display: block;}
	
	.service_image_box { width: 100%;}
	
	.service_cont2{ display: block;}
	
	.service_tip_box { width: 100%;
				margin-bottom: 40px;}
	
	.contact { display: block;
				overflow: hidden;}
	
	.contact_column { width: 100%;}
	
	.contact_form_back { margin: 60px 20px}
	
	.contact_info_box { margin: 60px 20px;}
	
	.footer_link { margin: 10px;}
	
	.footer_copy_text { font-size: 12px;}
	
	
}