/*
Theme Name: A Mindful Center
Author: Thomas Beaver
Author URI: https://thomas-beaver.com/
Description: Epic Themes by Thomas Beaver
Text Domain: mindfulCenter
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Imports -
2.0 Structure -
3.0 Clearings - 
4.0 Fonts & Colors -
5.0 Links
6.0 Lists 
7.0 Buttons
8.0 Forms
9.0 Navigation -
10.0 Layout
	10.1 Header
	10.2 Home Page
	10.3 Inside Pages
	10.4 Class Page
	10.5 Class Post Page
11.0 Footer
	11.1 Newsletter
	11.2 Policy
12.0 Widgets
13.0 Media

20.0 Media Queries
--------------------------------------------------------------*/


/*--------------------------------------------------------------
1.0 Imports
----------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700');
/*--------------------------------------------------------------
2.0 Structure
----------------------------------------------------------------*/
body {
	margin: 0;
	padding: 0;
	font-family: 'avenir';
	color: #5d5d5d;
	overflow-x: hidden;
}

.overflow {
	overflow: hidden;
}

.full {
	width: 100%;
}

.containerLarge {
	width: 1500px;
	margin: 0 auto;
}

.container {
	width: 1240px;
	margin: 0 auto;
}

.narrow {
	width: 860px;
	margin: 0 auto;
}

.padding {
	padding: 0 30px;
}

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.center {
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.line {
	height: 5px;
}

.relative {
  position: relative;
}

.row, .column {
  box-sizing: border-box;
}

.row:before,
.row:after {
    content: " ";
    display: table;
}

.row:after {
    clear: both;
}

.column {
  position: relative;
  float: left;
}

.column + .column {
  margin-left: 1.6%;
}

.col-1 {
  width: 100%;
}

.col-2 {
  width: calc(100%/2);
}

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

.col-4 {
  width: calc(100%/4);
}

.col-5 {
  width: calc(100%/5);
}

.col-6 {
  width: calc(100%/6);
}

.col-7 {
  width: calc(100%/7);
}

.col-8 {
  width: calc(100%/8);
}

.col-9 {
  width: calc(100%/9);
}

.col-10 {
  width: calc(100%/10);
}

.col-11 {
  width: calc(100%/11);
}

.col-12 {
  width: calc(100%/12);
}


/*--------------------------------------------------------------
3.0 Clearings
----------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.entry-footer:before,
.entry-footer:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after,
.nav-links:before,
.nav-links:after,
.pagination:before,
.pagination:after,
.comment-author:before,
.comment-author:after,
.widget-area:before,
.widget-area:after,
.widget:before,
.widget:after,
.comment-meta:before,
.comment-meta:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.entry-footer:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after,
.nav-links:after,
.pagination:after,
.comment-author:after,
.widget-area:after,
.widget:after,
.comment-meta:after {
	clear: both;
}
/*--------------------------------------------------------------
4.0 Fonts and Colors
----------------------------------------------------------------*/
h1 { font: 600 24px/26px 'Montserrat', sans-serif; line-height: 1.3em;}
h2 { font: 600 22px/24px 'Montserrat', sans-serif; }
h3 { font: 24px/26px 'Montserrat', sans-serif; color: #a7b794; }
p { font: 20px/22px 'avenir', sans-serif; line-height: 1.3em;}
a { font: 20px/22px 'avenir', sans-serif;  }
ol, ul { font: 20px/22px 'avenir', sans-serif; line-height: 1.3em;}

.blue { background-color: #91afd5; }
.yellow { background-color: #dbcfa5; }
.brown { background-color: #99664d; }
.green { background-color: #a7b794; }
/*--------------------------------------------------------------
5.0 Links
----------------------------------------------------------------*/
a {
	text-decoration: none;
	color: #91afd5;
	transition: .4s ease-in-out;
}

a:hover {
	color: #5d5d5d;
}

/*--------------------------------------------------------------
6.0 Lists
----------------------------------------------------------------*/
ol, ul { 
	font: 20px/22px 'avenir', sans-serif; 
	line-height: 1.3em;
}

li {
	padding: 5px 0;
}

/*--------------------------------------------------------------
7.0 Buttons
----------------------------------------------------------------*/
a.greenButton {
	background: #a7b794;
	color: white;
	border-radius: 3px;
	text-decoration: none;
	padding: 10px 15px;
	transition: .4s ease-in-out;
}

a.greenButton:hover {
	background: rgba(167, 183, 148, .5);
}
/*--------------------------------------------------------------
8.0 Forms
----------------------------------------------------------------*/
	/*--------------------------------------------------------------
	8.1 Contact
	----------------------------------------------------------------*/
	.gform_wrapper h3.gform_title {
		font-size: 2em !important; 
		margin: 30px 0 !important;
		color: #5d5d5d;
	}

	#gform_3 input, #gform_3 textarea, #gform_5 input, #gform_5 textarea {
		border-radius: 4px;
		border: 1px solid #a7b794;
	}

	#gform_3 input:focus, #gform_3 textarea:focus, #gform_5 input:focus, #gform_5 textarea:focus  {
		outline: none;
		border: 2px solid #91afd5;;
	}

	#gform_3 input[type=submit], #gform_5 input[type=submit] {
		background: #a7b794;
		color: white;
		border: none;
		border-radius: 3px;
		text-decoration: none;
		padding: 10px 15px;
		margin-left: 20px;
		transition: .4s ease-in-out;
	}

	#gform_3 input[type=submit]:hover, #gform_5 input[type=submit]:hover {
		background: rgba(167, 183, 148, .5);
	}

	.gform_wrapper ul li.gfield {
		clear: none !important;
	}

	#field_5_6 {
		margin: 40px 0 !important;
	}

	.gform_wrapper h3.gform_title {
		letter-spacing: normal!important;
		margin: 10px 0 6px !important;
	}


	/*--------------------------------------------------------------
	8.2 REgistration
	----------------------------------------------------------------*/

/*--------------------------------------------------------------
9.0 Navigation
----------------------------------------------------------------*/

.hamburger {
	display: none;
	float: right;
	position: relative;
	width: 100px;
	height: 100px;
	margin-right: 20px;
	transition: .4s ease-in-out;
}

.bars {
	position: absolute;
	width: 60%;
	height: 3px;
	border-radius: 2px;
	background: #5d5d5d;
	transition: .4s ease-in-out;
}

.bars:first-child {
	top: 30%;
}

.bars:nth-child(2) {
	top: 50%;
}

.bars:last-child {
	top: 70%;
}

.spin {
	transform: rotate(180deg);
	margin-right: 60px;
}

.closeBars:first-child {
	transform: rotate(45deg);
	top: 50%;
}

.closeBars:nth-child(2) {
	display: none;
}

.closeBars:last-child {
	transform: rotate(-45deg);
	top: 50%;
}

.smallMenu {
	position: fixed;
	background: #fff;
	z-index: 998;
	width: 100%;
	overflow: hidden;
	transition: .4s ease-in-out;
}

.height {
	height: 100vh;
}

.noHeight {
	height: 0;
}

.smallNav {
	text-align: center;
}

.smallNav ul {
	padding-left: 0;
	padding-top: 50px;
	width: 100%;
}

.smallNav ul li {
	padding-bottom: 10vh;	
}

.smallNav ul li a {
	color: #5d5d5d;
}

nav {
	position: fixed !important;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	height: 100px;
	background: #fff;
	border-bottom: 4px solid #a7b794;
}


nav a img {
	position: absolute;
	top: 5px;
	left: 20px;
	height: 90px;
}

nav ul {
	position: absolute;
	top: 60px;
	right: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}

nav ul li {
	float: left;
	
}

nav ul li a {
	font-family: 'Montserrat';
	font-size: 1.2em;
	padding: 0 5px;
	margin: 0 30px;
	text-decoration: none;
	color: #2d2d2d;
	transition: .4s ease-in-out;
}

nav ul li a:hover {
	color: #91afd5;
}

.current-menu-item > a {
	border-bottom: 3px solid #91afd5;
}

#shiftnav-main.shiftnav .shiftnav-target{
	text-transform:none;
}

/*--------------------------------------------------------------
10.0 Layout
----------------------------------------------------------------
	10.1 Header
	------------------------------------------------------------*/
	.image {
		display: block;
		position: relative;
		width: 100%;
		height: 40vh;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		color: white;
		margin-top: 70px;
	}

	.classImage {
		display: block;
		position: relative;
		width: 100%;
		height: 20vh;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		color: white;
		margin-top: 70px;
	}

	.classIcon {
		display: block;
		position: relative;
		width: 100%;
		height: 20vh;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		color: white;
	}

	/*----------------------------------------------------------
	10.2 Home Page
	------------------------------------------------------------*/
	.links {
		padding: 20px 0;
		background: rgba(219, 207, 165, .2);
	}

	.links a {
		display: block;
		width: 100%;
		text-align: center;
		color: #91afd5;
		text-decoration: none;
		transition: .4s ease-in-out;
	}

	.links a:hover {
		color: #2d2d2d;
	}

	.links p {
		padding: 0 5%;
		line-height: 1.3em;
	}

	.links img {
		width: 80%;
		height: auto;
		padding: 0 10%;
	}

	.links h1 {
		font-size: 1.5em;
	}

	.mindful, .classes, .resources {
		width: 100%;
	}

	.quote {
		padding: 20px 0 0px;
	}

	.quote h6 {
		font-family: 'Mightype Script';
		font-size: 2.5em;
		color: #a7b794;
		margin: 10px 0;
		padding: 0 20%;
	}

	.getStarted {
		padding: 30px 0;
	}

	.getStarted h1 {
		font-size: 2em;
		line-height: 1.8em;
	}

	.getStarted p {
		padding-bottom: 30px;
	}

	/*----------------------------------------------------------
	10.3 About Page
	------------------------------------------------------------*/
.core li {
		padding: 10px 0;
	}

	/*----------------------------------------------------------
	10.4 Resources Page
	------------------------------------------------------------*/
	.hide {
		display: none;
	}

	/*----------------------------------------------------------
	10.4 Classes Page
	------------------------------------------------------------*/
	.classItem {
		width: calc(100%/10*9);
	}
	.classItem a {
		color: #a7b794;
	}

	.bullet img {
		width: 50%;
		float: right;
		margin: 10% 10% ;
	}

	/*----------------------------------------------------------
	10.5 Class Post Page
	------------------------------------------------------------*/
	.largeShow {
		display: none;
	}

	.largeShow .classIcon {
		width: 100%;
	}

	.largeShow .registerButton {
		width: 100%;
	}

	.registerButton {
		margin: 30px 0;
		text-align: center;
	}

	.reg {
		display: block;
		width: 90%;
		margin-right: 10%;
	}

	.space {
		margin-top: 110px;
	}

	.content {
		margin-top: 20px;
	}

	.post h2 {
		font-size: 1.1em;
		margin-bottom: 0;
	}

	.post h3 {
		font-size: 1.3em;
	}

	.post p {
		margin-top: 5px;
	}

	.schedule {
		padding-right: 10%;
	}

	.classPost {
		padding: 0 10px;
	}

	.benefits {
		padding-left: 40px;
	}

	.smallBen {
		display: none;
	}

	.smallBen ul {
		padding-left: 20px;
	}
/*--------------------------------------------------------------
11.0 Footer
----------------------------------------------------------------*/
	/*----------------------------------------------------------
	11.1 Newsletter
	------------------------------------------------------------*/
footer {
	color: #fff;
	background: rgba(167, 183, 148, .5);
	margin-top: 40px;
}
.newsletterSpace {
	background: #91afd5;
	width: 100%;
}

.gform_wrapper {
	margin: 0 !important;
}

body .gform_wrapper ul li.gfield {
	margin-top: 0 !important;
}

.newsletter {
	padding: 20px 0 30px;
}

.newsletter .gform_heading {
	margin: 0 !important;
}

.newsletter .gform_heading h3 {
	font-size: 2em !important;
	color: #fff;
	text-align: center;
	width: 100%;
	padding-bottom: 10px;
}

.newsletter .gform_heading span {
	font-size: 1em !important;
	color: #fff;
	text-align: center;
	width: 100%;
	padding-top: 10px;
}

.newsletter .gfield_label {
	display: none !important;
}

.newsletter .gform_body {
	width: 65% !important;
	float: left !important;
}

.newsletter .gform_body input {
	float: right !important;
	width: 65% !important;
}

.newsletter .gform_footer {
	width: 30% !important;
	float: left !important;
	clear: none !important;
}

.newsletter .gform_footer input {
	width: 100% !important;
}



.newsletter input[type=text] {
	width: calc(100%/2);
	height: 30px;
	border-radius: 4px 0 0 4px;
	border: none;
	padding-left: 10px;
}

.newsletter input[type=text]:focus {
	outline: none;
}

.newsletter input[type=submit] {
	background-color: #99664d;
	border: 1px solid transparent;
	border-radius: 0 4px 4px 0;
	color: #fff;
	padding: 0 10px;
	margin: 0;
	margin-left: -20px;
	height: 32px;
	transition: .4s ease-in-out;
}

.newsletter input[type=submit]:hover {
	background: #a7b794;
	color: #a7b794;
	border: 1px solid #4d8ac0;
}

.newsletter button:focus {
	outline: none;
}

.gform_wrapper .gform_footer {
	padding: 0 !important;
	margin: 7px 0 0 -20px !important;
	width: auto !important;
	display: inline !important;
}

.newsletter li {
  list-style-type: none !important;
}
	/*----------------------------------------------------------
	11.2 Policy
	------------------------------------------------------------*/

.policy {
}

.policy h2 {
	margin: 0;
	line-height: 1.2em;
	font-size: 1em;
}

.policy p {
	margin: 0;
	line-height: 1.2em;
	font-size: .8em;
}

.policy a {
	color: #fff;
}

footer img {
	width: 100px;
	margin: 10px 20px;
	vertical-align: middle;
}
/*--------------------------------------------------------------
12.0 Widgets
----------------------------------------------------------------*/

/*--------------------------------------------------------------
13.0 Media
----------------------------------------------------------------*/

/*--------------------------------------------------------------
20.0 Media Queries
----------------------------------------------------------------*/

	/*----------------------------------------------------------
	20.1 @ 1500px
	------------------------------------------------------------*/
@media only screen and (max-width: 1500px) {
	.containerLarge {
		width: 100%;
	}

}

	/*----------------------------------------------------------
	20.2 @ 1240px
	------------------------------------------------------------*/
@media only screen and (max-width: 1240px) {
	.container {
		width: 100%;
	}
	nav a img {
		height: 70px;
		top: 20px;
	}

	nav ul li a {
		font-size: .85em;
	}

	.classLeft {
		width: 20%;
	}

	.classMiddle {
		width: 45%;
	}

	.classRight {
		width: 35%;
	}

}

	/*----------------------------------------------------------
	20.3 @ 1024px
	------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
	.nav {
		display: none;
	}

	.hamburger {
		display: block;
	}

	nav a img {
		height: 90px;
		top: 5px;
	}

	.smallBen {
		display: block;
	}

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

	.classMiddle {
		width: calc(100%/3*2);
	}

	.classRight {
		display: none;
	}

	.resourceColumn {
		width: 50%;
	}

	.noHide {
		display: none;
	}

	.hide {
		display: block;
	}

}

	/*----------------------------------------------------------
	20.4 @ 980px
	------------------------------------------------------------*/
@media only screen and (max-width: 980px) {
	.stack {
		width: 100%;
		padding: 20px 0 10px;
	}
	.stack:nth-child(2) {
		background: rgba(255, 255, 255, .7);
	}

	.bullet img {
		width: 80%;
		float: right;
		margin: 20% 10% ;
	}
}

	/*----------------------------------------------------------
	20.5 @ 860px
	------------------------------------------------------------*/
@media only screen and (max-width: 860px) {
	.narrow {
		width: 100%;
	}
}

	/*----------------------------------------------------------
	20.6 @ 740px
	------------------------------------------------------------*/
@media only screen and (max-width: 740px) {
	.smallIcon, .smallButton {
		display: none;
	}

	.largeShow {
		display: block;
	}

	.reg {
		margin: auto;
	}
}

	/*----------------------------------------------------------
	20.7 @ 640px
	------------------------------------------------------------*/
@media only screen and (max-width: 640px) {
	.bullet {
		display: none;
	}

	.classItem {
		width: 100%;
	}

	.classLeft {
		width: 100%;
		text-align: center;
	}

	.classMiddle {
		width: 100%;
	}

	.classRight {
		display: block;
		width: 100%;
	}

	.smallBen {
		display: none;
	}

	.schedule {
		padding-right: 0;
	}

	.resourceColumn {
		width: 100%;
	}

	.newsletter .gform_footer input[type=submit] {
		height: 34px !important;
	}


	.policy p {
		line-height: 1.2em;
		font-size: .8em;
	}

	.policy a {
		color: #fff;
	}

	footer img {
		display: none
	}

	.toLeft {
		float: left;
		padding: 20px 10px;
	}

	.toRight {
		float: right;
		padding: 20px 10px;
	}
}

	/*----------------------------------------------------------
	20.8 @ 500px
	------------------------------------------------------------*/
@media only screen and (max-width: 500px) {
	.bullet img {
		width: 100%;
		float: right;
		margin: 40% 10% ;
	}


	.newsletter .gform_body {
		width: 100% !important;
		float: left !important;
		text-align: center !important;
		margin: 0 auto 20px !important;
	}

	.newsletter .gform_body input {
		float: none !important;
		width: 60% !important;
		text-align: center !important;
		margin: auto !important;
	}

	.newsletter .gform_footer {
		width: 100% !important;
		clear: none !important;
		text-align: center !important;
		margin: 0 auto 20px !important;
	}

	.newsletter .gform_footer input {
		width: 40% !important;
		text-align: center !important;
		margin: auto !important;
	}

	.newsletter input[type=submit], .newsletter input[type=text] {
		border-radius: 4px;
	}

	nav {
		height: 75px;
	}

	nav a img {	
		height: 60px;
	}

	.hamburger {
		width: 75px;
		height: 75px;
	}

	.image, .classImage, .space {
		margin-top: 30px;
	}

}

	/*----------------------------------------------------------
	20.9 @ 440px
	------------------------------------------------------------*/
@media only screen and (max-width: 440px) {
	.toLeft, .toRight {
		float: left;
		width: 100%;
		text-align: center;
		padding: 20px 0;
	}
}

	/*----------------------------------------------------------
	20.10 @ 320px
	------------------------------------------------------------*/
@media only screen and (max-width: 320px) {

}