/*  
Theme Name: BodyMindRx
Version: 1.0
Author: Raven Gildea
Author URI: http://ravengildea.net/
*/

/*
COLOR CODES:

#727272;  dark gray 

#477599;  darker denim  rgba(71, 117, 153, .4)

#90a9c1;  lighter denim  rgba(144, 169, 193, .6)

#1e576a;  dark blue

#758899;  med blue gray 

#838d8c;  logo gray 
#1e576a;  logo blue
*/

/*
MODULAR SCALE

http://www.modularscale.com/?16,22&px&1.618&web&text

*/



/* RESETS */
body, body * {
	margin: 0; 
	padding: 0; 
	box-sizing: border-box;	/* declared width = rendered width */
}
a img {
	border: none;
}

a {
	text-decoration: none;
}

/* RESPONSIVE */

/* will not validate --------- */
html { 
	-webkit-text-size-adjust: none; 	/* don't resize body copy on iPhone */
}

@-ms-viewport,		/* IE10 */
@viewport	{		/* future browsers */
    width: extend-to-zoom;
    zoom: 1.0;
}
/* --------- end will not validate */

/* SCALABLE IMAGES */
img, 
embed, 
object, 
video, 
iframe, 
.wp-caption { 	
	max-width: 100%;		
	width: auto;
	height: auto;
}

/* GLOBAL TEXT STYLES   ------------------------------------------------ */

html {
	font-size: 16px;
}

body {
	font-family: 'Quicksand', Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 140%;
	line-height: 1.375;
	color: #727272;  /* dark gray */
	font-kerning: normal;
}


strong, dt { 
	font-family: 'Quicksand', Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-weight: 700;
}

h1 {
	font-size: 2.5em;
}

h2 {
	font-size: 2.125em;	
	line-height: 1.2;
	margin-bottom: .25em;
}

h1, h2, h4 {
	font-weight: 300;
}

h3 {
  font-size: 150%;
  font-weight: 500;
  text-transform: uppercase;
}

a:link, 
a:visited {
	color: #888;
	}
		
a:hover, 
a:focus {
	color: #758899; /* med blue gray */
	}
		
p, ol, ul, dl {
	margin: 0 0 .75em 0;	
}

ul, dd {
	margin-left: 1.25em;	
}

ol {
	margin-left: 1.75em;	
}

li, dd {
	margin-bottom: 0.3125em;
	line-height: 1.4;	
}

blockquote {
	font-family: Georgia, Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 1.375em;
	line-height: 1.382;
}

.attrib {
	
}

/* LAYOUT   ------------------------------------------------ */

.wrapper {
	width: 96%;			/* match #nav-main ul */
  max-width: 1500px;
  max-width: 93.75rem;
	margin: 2.225em auto 1.875em;
}

.container {				
	clear: both;
	overflow: hidden;	
}

section .container {
  padding: 1.618em 0;
}


/* FLEXBOX -- (#about, #contact) */

.flexcontainer {	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.v-center {
  align-items: center;
}

.flexchild {	/* child elements have no floats or side margins */
  float: none;
  margin-right: 0;
}


/*	FLOATED COLUMNS IN CONTAINERS */
  
.six-12 {   
  width: 738px; 
  width: 49.2%; /* 738 / 1500 */    
  float: left;
}

.five-12 {
  width: 611px;
  width: 40.733333333%; /*  611 / 1500 */
}

.four-12 {
  width: 462px;  /* 357 + 20 + 85 */   
  width: 23.8%; /* 357 / 1500 */
}

.three-12 {
  width: 357px;
  width: 23.8%; /* 357 / 1500 */
}


/* PARALLAX */

.parallax {
	clear: both;
  background-size: cover; 
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: rgba(117, 136, 153, .25);
	background-blend-mode: color;  	
	height: auto;
  padding: 7% 1.618rem 7%;
 }
 
.parallax div {
	padding: 2em 1.618em 1.375em; 
	background-color: rgba(117, 136, 153, .6);
	color: #FFF;
	border-radius: 25px;
	font-weight: 400; 
 }


/* 	MISC STYLES */
	
.last {
	margin-right: 0;
}

.center {
	margin: auto;	
}

.centered-col {
  width: 60%;
  margin: 0 20%;
  text-align: center;
}

.centered-col h2,
.centered-col h3 {
  text-align: center;  
}

.left {	
	float: left;
}
	
.right { 	
	float: right;
}

.clear {
	clear:both;
}

.border {
	border: 1px solid #CCC;	
}

/* Back to top link accessibility */

.up {
	position: relative; /* set positioning context for nested hidden text */
}

.hidden {		/* hide from view, but not from screen readers */
    position: absolute; 
    left: 999em;	/* disappears off the right edge of the screen. (negative value sends it left instead.) */
}

.up .hidden { /* in case hidden link text ever displays, it looks good */
	font-size: .3em;
  margin-top: 4.5em;
}
		

/* HEADER   ------------------------------------------------ */

#header {

}

header h1 {
  float: left;
  margin-bottom: 0.382em;
}

#tagline {

}



	
/* INTRO */
  
#intro.parallax {
	background-image: url(images/chelsea-gates-n8L1VYaypcw-unsplash.jpg);
  min-height: 650px;
  padding: 7% 1.618rem 7%;
}

#intro.parallax > div {
  width: 49%;
  float: right;
  text-align: left;  
}  

#logo {
  max-width: 100px;
  display: block;
  float: left;
  margin: 0 1.375em 1.375em 0;
}


/* SECTIONS  ------------------------------------------------ */


/* MIDDLE ----------------------------------- */

 h2 {
	font-family: 'Quicksand', Helvetica, Arial, sans-serif;
	font-size: 2.225em;
	font-weight: 300;
	text-align: left;	
}

#middle .wrapper {
  margin-bottom: 0;
}


/* BULLETS ----------------------------------- */


#bullets .wrapper {
  max-width: 60%;
  margin-top: 0;
}

#bullets img {
  display: block;
  float: left;
  max-width: 250px;
  margin: 0 2em 2em 0;
}

#bullets h3 {
  padding-top: 1em;
}

/* PRICING --------------------------------- */

#pricing,
#pricing h3 {
  text-align: center;
}


/* ABOUT ----------------------------------- */

#about {
  background-color: rgba(144, 169, 193, .4);
  color: #525252;
}

#about .three-12 {
  order: 2;
}

#about .three-12 img {
  width: 300px; /* about img is not responsive */
  margin: 0 0 2em 2em;
}


/* CONTACT ----------------------------------- */

#contact {
  background-color: #477599; /* darker denim */
	background-color: #90a9c1; /* lighter denim */
  color: #FFF;	
  text-align: center; 
}

#contact .wrapper {
	max-width: 475px;	
}

#contact h2 {
	font-size: 2.5em;
	font-weight: 300;	
}

#card {
  margin: auto;
  text-align: left;
}

#card p {
    font-size: 1.375em;
}

#card a:link,
#card a:visited  {
  color: #FFF;
}

#card a:hover,
#card a:focus {
  color: #1e576a;  /* dark blue */
}

#card a:hover i.fa,
#card a:focus i.fa {
    color: #477599;  /* darker denim */
}

#card .fa-phone-square {
  font-size: 1.75em;
}

#card .fa-whatsapp {
  
}

#card .fa-envelope {
  font-size: 1.6em;
}

#contact .up {
	text-align: right;	
}
  
  


/* COPYRIGHT */

#copyright {
	overflow: hidden;
  background-color: #477599; /* darker denim */
	background-color: #90a9c1;  /* lighter denim */
}

#copyright p {
  text-align: center;
  line-height: 1.3;
  margin: .75em 0;
  color: #FFF;  
}



/* NAV STYLES */


/* MAIN NAV */

#nav-main {
	overflow: hidden;
	font-weight: 400;
	background-color: #477599;  /* darker denim */
}

#nav-main ul {
	text-align: center;
	margin: 0;			/* reset global ul margins */
}

#nav-main li {
	float: left;
	width: 15%;
	list-style-type: none;
	margin: 0;			/* reset global li margins */
  white-space: nowrap;
}

#nav-main li.narrow {
	width: 11%;
}

#nav-main li.wide {
	width: 17%;
}


#nav-main a {
  color: #FFF;  
	display: block;
	text-decoration: none;
  border-right: 1px solid #FFF;  
	padding: .2em 0.9375em;
	font-size: 0.85em;
}

#nav-main a:hover, 
#nav-main a:focus, 
#nav-main a.current_page {
	color: #FFF;		
}

#nav-main li.last a {
	border-right: none;
}


/* 	TOGGLE MOBILE NAV */

#nav-mobile {
	display: none;			/* not visible on wider screens */
	font-size: .85em;
	overflow: hidden;
	font-weight: 400;
	background-color: #477599;	/* darker denim */
}

#nav-mobile a {
  color: #FFF;  
	text-decoration: none;
}

#nav-toggle a:hover,
#nav-toggle a:focus {
	color: #FFF;		
}

#nav-mobile ul {
	display: none;			/* nav list is closed on page load */
	list-style-type: none;
	margin: 40px 0 0 0;
	padding: 0;
	border-bottom: 1px solid #FFF;  
}

#nav-mobile li {
	margin: 0;
}

#nav-toggle a {
	display: block;
	padding: 6px 10px;
	padding: 0.375em 0.85rem; 	
	font-size: 1.1em;	
  border-top: 1px solid #FFF;  
}

#toggle-icon {
	display: block;
	width: 240px;
	padding: 0 1.375rem 0 0;;
	float: right;
	text-align: right;
	font-size: 1.25em;
}

/* GO TO TOP STYLES */   

.up {
	float: right;
	width: 50px;
	text-align: right;
	padding-right: 2em;
	margin: 0.236em 0;	
	font-size: 2.5em;
	color: #758899;	/* med blue gray */ 
  color: #477599;	/* darker denim */ 
	line-height: 0;
}

.up a:link,
.up a:visited {
	color: #758899;	/* med blue gray */
  color: #477599;	/* darker denim */  
}

.up a:hover,
.up a:focus {
	color: #4E5B66;	/* darker blue gray */
  color: #1e576a;  /* dark blue */
}






/*  ---------------  MEDIA QUERIES  ---------------  */		


/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1165px) {
.parallax {
  background-attachment: scroll;
}
} 

@media (max-width: 1165px) {
  
#intro.parallax > div {  
  width: 60%;
}

}

@media (max-width: 1070px) {
  
#intro .wrapper {  
  margin-top: 0;
}  
  
#practice .six-12, 
#bullets .wrapper {
  width: 80%;
}

}

@media (max-width: 1000px) {
  
  
#intro.parallax > div {  
  width: 75%;
}
  
  
#practice .six-12 {
  width: 80%;
}  

#bullets .wrapper {
  max-width: 80%;
}
  
#bullets img {
  max-width: 200px;
}

#bullets h3 {
  padding-top: 0;
}

#about .three-12 {
  width: 250px;
}

#about .three-12 img {
  width: 250px; 
}

}


@media (max-width: 855px) {
  
#about .six-12 {
  order: 2;
}  
  
#about .three-12 {
  order: 1;
}

#about .three-12 img {
  margin: 0 0 2em;
}

}


@media (max-width: 800px) {

#nav-main a {
  padding: .2em 0.525em;
}

}
		
@media (max-width: 850px) {


#intro.parallax > div {  
   width: 90%; 
}
	
#middle .wrapper {
    margin-bottom: 0;
}	

.three-12 {
  width: 30%;
}

.six-12 {
  width: 75%; 
}
	
.six-12,
.six-12.last,
.six-12.right {
	float: none; 	
	margin: 0 auto 1em;
}

#copyright .six-12 {
  width: 100%;
}
	
}


@media (max-width: 730px) {
  
#nav-main {	
  display: none;
}

#nav-mobile {
  display: block;
}

#bullets .wrapper,
#about .wrapper, 
#contact .wrapper {
  width: 85%;
}
  
#bullets img {
  display: block;
  float: none;  
  margin: 0 auto 1em;
} 

#bullets div {
  clear:both;
  margin-bottom: 2em;
} 

#pricing, #pricing h3 {
  text-align: left;
}

.three-12 {
  width: 250px;
}

.six-12 {
  width: 100%;
}

.up {
	clear: both;
    width: 100%;
    padding-right: 1.7rem;
}

}


@media (max-width: 650px) { 

#intro.parallax > div {  
  width: 100%;
}

header h2 {
  font-size: 2em;
}

}
	
  
@media (max-width: 630px) {  

header h1 {
	float: none;
	margin: 20px 0;
}

header h2 {
  font-size: 1.618em;
}

#copyright p {
  width: 90%;
  margin: 1.618em auto;
}

}


@media (max-width: 580px) {

header h1 {
  font-size: 2.225em;
  margin: 0.382em 0;
}  

}


@media (max-width: 545px) {

#intro #logo {
  max-width: 150px;
  float: none;
  margin: auto;
}

}
  

	
@media (max-width: 470px) {
	
body {
	font-size: 130%;	
	line-height: 1.5;
}


#middle .six-12 > img {
  margin-bottom: 7%;
}

#card p {
  font-size: 1em;
}
	
}

@media (max-width: 400px) {

section .container .container {
  padding-bottom: 0;
}

.six-12, .six-12.last, .six-12.right {
	margin-bottom: 3em;	
  margin-bottom: 0;	
  padding-bottom: 0;
}

}


@media (max-width: 380px) {

header h1 {
  font-size: 2em;
}

}
	
@media (max-width: 275px) {
	
#middle h2,
#contact h2 {
	font-size: 2em;	
}

}