@charset "utf-8";
/* CSS Document */
/*headline - font-family: "Bebas Neue", sans-serif;
  paragraph - font-family: "Quattrocento", serif;
*/

/* Summer Vibe Colors:
	Beige: #E2BF94;
     Teal: #21BF94;
     Blue: #608994;
    Brown: #E3B974;
     Pink: #E3898A;
     Sand: #F2DABD;
*/

*{ 
	box-sizing: border-box;
	margin:0;	
}

body{marigin: 0.3em auto;
	 padding: 0.3em auto;
	 width: 100%;
	 border: 0px solid;
	 background:#F2DABD url("../img/beachopacity.jpg") no-repeat fixed;
	 background-size:cover;
	 height:900px;
}

.homeBody {
	 marigin: 0.3em auto;
	 padding: 0.3em auto;
	 width: 100%;
	 border: 0px solid;
	 background:#F2DABD url("../img/beachopacity.jpg") no-repeat fixed;
	 background-size:cover;
	 height:900px;
}

header {
	line-height: 50px;
	font-family: "Bebas Neue", sans-serif;
	color:#21BF94;
	text-align: center;
	font-size: 4em;
	text-shadow: 2px 2px 0px black;
}


h3 {font-family: "Quattrocento", serif;
	color:#608994;
	font-size: 2em;
	text-shadow: 1px 1px 0px black;
} 

h1, h2, h4, h5, h6 {font-family: "Quattrocento", serif;
						color:#608994;					 
}

p{font-family: "Quattrocento", serif;
  font-size: 1.1em;
  font-weight:bold;
}

#mainNav {
	overflow: hidden;
	margin: 0;
	display: block;
	position: fixed;
	background-color: #E2BF94;
	width: 100%;
	font-family: 'Quattrocento', serif;
	height: 46px
}

#mainNav img {height: 28px
}


/* style for links inside navigation bar*/

#mainNav a{
	float: left;
	marigin:0;
	display: inline-block;
	color: #000000;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none; /*removes underline*/
}

/*Change color of links when hover over*/

#mainNav a:hover {
	background-color: #ffffff; 
	color: #000000;
	font-weight: 900;
}
/*add a color to active/current link*/

#mainNav-right .active {
	background-color:#ffffff;
	color:#000000;	
}
/* Right-aligned section inside the top navigation*/
#mainNav-right {
	float:right;
}
/* Clear floats after the colomns*/
.row:after {
	content:"";
	display: table;
	clear: both;	
}

/*SIGN IN BUTTON*/
/*#button1{
	float: left;
	margin-left: 50px;
	background-color: #E2BF94;
	border-radius: 14px;
	color: #000000;
	padding: 12px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	box-shadow: -1px 0 2px #000000;
}*/
/*<button id="button1" type="button" onclick="alert('Hello world!')">SIGN IN</button>
		<br><br>
	
	<br class="row:after">
		<br><br>*/


/*HOME--Flexbox Container three columns*/

.container {
	display: flex;
	height: 700px;
	flex-direction: row;
	justify-content: space-between;
	align-items:baseline;
	
}

/*flexbox item*/
.element {
	margin-right: 20px;
    margin-left:20px;
	padding: 0.5em;
	flex-basis: 30%; /*column width*/
	height:570px;
	box-shadow: -1px 0 7px #000000;
}
	
/*HOME - Flexbox Column background images*/
.health {
	   background: #E3898A url("../img/mental-health.jpg") no-repeat center;
	   background-size: cover;
       height: 300px;			  
}

.body {
	   background: #E3898A url("../img/excercise.jpg") no-repeat center;
	   background-size: cover;
       height: 300px;			  
}

.eats {
	   background: #E3898A url("../img/colorful_plate.jpg") no-repeat center;
	   background-size: cover;
       height: 300px;			  
}

/* Start 2 column bottom container*/
.Bottom {
	display: flex;
	height: 400px;
	flex-direction: row;
	justify-content: center;
	align-items:baseline;
}

/*flexbox item*/
.element1 {
	margin-right: 15px;
    margin-left:15px;
	flex-basis: 45%; /*column width*/
	height:300px;
	background-color: #E2BF94;
	box-shadow: -1px 0 10px #000000
}

.homeText{
	font-size: 1.2em;
	font-weight: 600;
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 1em;
	padding-right: 1em;
	
}


footer {background-color:#E2BF94;
		text-align:center;
		line-height:50px;
}




/****** ABOUT PAGE******/

/*About Background image*/
.aboutBody {
	 marigin: 0.3em auto;
	 padding: 0.3em auto;
	 width: 100%;
	 border: 0px solid;
	 background:#F2DABD url("../img/sunset.jpg") no-repeat fixed;
	 background-size:cover;
	 height:900px;
}

#aboutHead {
	line-height: 50px;
	font-family: "Bebas Neue", sans-serif;
	color:#21BF94;
	text-align: center;
	font-size: 4em;
	text-shadow: 2px 2px 0px black;
}

/*ABOUT HEADER--Flexbox Container three columns*/

.topContainer {
	display: flex;
	height: 400px;
	flex-direction: center;
	justify-content: center;
	align-items:baseline;
		
}

/*about flexbox five item*/
.element1 {
	height:250px;
	margin-right: 20px;
    margin-left:20px;
	padding: 1px;
	border-style: outset;
	border-radius: 70px;
	flex-basis: 100%; /*column width*/
	box-shadow: -1px 0 7px #000000;
	text-align: center;
}

.missionText {
	margin: 10px;
}

/*ABOUT--Flexbox Container five columns*/

.people {
	display: flex;
	height: 500px;
	flex-direction: row;
	justify-content: center;
	align-items:baseline;
		
}

/*about flexbox five item*/
 
.lined {
	margin-right: 10px;
    margin-left:10px;
	padding: 0.5em;
	flex-basis: 100%; /*column width*/
	box-shadow: -1px 0 7px #000000;
}



	
/*ABOUT - Flexbox Column background images*/

.woman {
	   background: #E3898A url("../img/woman.jpg")no-repeat center;
	   background-size: cover;
       height: 300px;			  
}

.man {
	   background: #E3898A url("../img/man.jpg") no-repeat center;
	   background-size: cover;
       height: 300px;			  
}

.woman2 {
	   background: #E3898A url("../img/woman2.jpg") no-repeat center;
	   background-size: cover;
       height: 300px;			  
}
.man1 {
	   background: #E3898A url("../img/man1.jpg") no-repeat center;
	   background-size: cover;
       height: 300px;			  
}

.woman3 {
	   background: #E3898A url("../img/woman3.jpg") no-repeat center;
	   background-size: cover;
       height: 300px;			  
}



/*****CONTACT PAGE*****/

/*Contact background image*/
.contBody {
	 marigin: 0.3em auto;
	 padding: 0.3em auto;
	 width: 100%;
	 border: 0px solid;
	 background:#F2DABD url("../img/beach170.jpg") no-repeat fixed;
	 background-size:cover;
	 height:900px;
}

/* CONTACT HEADER*/
.top_head {
	display: flex;
	height: 200px;
	flex-direction: row;
	justify-content: center;
	align-items:baseline;
}

/* Start 2 column bottom container*/
.contactPage {
	display: flex;
	height: 600px;
	flex-direction: row;
	justify-content: center;
	align-items:baseline;
}

/*flexbox item*/
.contactUs {
	height: 300px;
	margin-right: 20px;
    margin-left:20px;
	padding: 2px;
	flex-basis: 100%; /*column width*/
	background-color: transparent;
	border-style: outset;
	border-radius: 70px;
	box-shadow: -1px 0 7px #000000;
}

.boxText{
	text-align: center;
}
.followText {
    margin-left:90px;
}




/**COMMUNITY PAGE**/

/*Community Background image*/

.commBody {
	 marigin: 0.3em auto;
	 padding: 0.3em auto;
	 width: 100%;
	 border: 0px solid;
	 background:#F2DABD url("../img/beach70.jpg") no-repeat fixed;
	 background-size:cover;
	 height:900px;
}


/*COMMUNITY HEADER*/
.top_head1 {
	display: flex;
	height: 110px;
	flex-direction: row;
	justify-content: center;
	align-items:baseline;
}

/*start 4 column container*/

/*COMMUNITY--Flexbox Container four columns*/

.support {
	display: flex;
	height: 400px;
	flex-direction: row;
	justify-content: center;
	align-items:baseline;
		
}

/*community flexbox four item*/
 
.lined1 {
	margin-right: 10px;
    margin-left:10px;
	padding: 0.5em;
	flex-basis: 100%; /*column width*/
	box-shadow: -1px 0 7px #000000;
}



	
/*COMMUNITY - Flexbox Column background images*/

.therapists {
	   background: #E3898A url("../img/therapist.jpg")no-repeat center;
	   background-size: cover;
       height: 300px;			  
}

.suppAss {
	   background: #E3898A url("../img/support.jpg") no-repeat center;
	   background-size: cover;
       height: 300px;			  
}

.commun {
	   background: #E3898A url("../img/community.jpg") no-repeat center;
	   background-size: cover;
       height: 300px;			  
}
.resource {
	   background: #E3898A url("../img/resources.jpg") no-repeat center;
	   background-size: cover;
       height: 300px;			  
}

/*COMMUNITY bottom header*/

.bottom_img {
	display: flex;
	height: 600px;
	flex-direction: center;
	justify-content: center;
	align-items:baseline;
		
}

/*community bottom flexbox five item*/
.bott_img {
	height:420px;
	margin-right: 50px;
    margin-left:50px;
	padding: 1px;
	border-style: outset;
	border-radius: 70px;
	flex-basis: 52%; /*column width*/
	box-shadow: -1px 0 7px #000000;
}

.bott_img {
	background: url("../img/rise.jpg") no-repeat center;
	background-size: 600px;
	
}