/* Chad Kelderman re-design 2018 */


/* modular scale:  
http://www.modularscale.com/?16&&1.25,1.5&web&text 
*/

/*  COLOR CODES

/*
	color: #FFDD4F;	/* bright yellow */
/* 
	color: #D05700;	/* medium orange */
/*
	color: #8F0101;	/* rich rust */
/*
	color: #5A0C00;	/* very dark red nearly black */
/*
	color: #5D5117;	/* olive green */
/*
	color: #2B2605;	/* very dark olive nearly black */
	

	
	
/* COLOR OPTIONS NOT IN USE */
/*
color: #DD6409;	/* bright orange */
/*
color: #847029;	/* darker khaki */
/*
color: #A81704;	/* brighter rust */
/*
color: #512200;	/* dark brown (from duotones) */
/*
color: #504619;  	/* dark olive */		/* rgba(80, 70, 25, 1) */



/* 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 { 	/* wp-caption for flexible images in wordpress */
	max-width: 100%;		/* scale images, override img width attribute */
	width: auto;
	height: auto;
}

/* SCALABLE VIDEOS */
.video-container {
	position: relative;
	padding-top: 56%;	
	height: 0; 
	overflow: hidden;
	margin: 1.953em 0;
}

#secondary .video-container {
	padding-top: 56.5%;	
}
 
.video-container.fifty {
	padding-top: 50.5555%;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.home .video-container {
	margin-bottom: 3.375em;
	background-color: #5A0C00;	/* very dark red nearly black */	
}
				
/* GLOBAL TEXT STYLES */

html {
	font-size: 16px;
}

body {
	font-family: 'Raleway', "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.8;
	color: #8F0101;		/* rich rust */
}

em { 
	font-style: italic;
}

strong, dt { 
	font-weight: bold;
	font-weight: 700;
}

#middle a:link, 
#middle a:visited {
    color: #5A0C00;	/* very dark red nearly black */
    text-decoration: none;
    border-bottom: 1px solid #5A0C00;	/* very dark red nearly black */
}
		
#middle a:hover, 
#middle a:focus {
    border-bottom: none;
}
		
p, ol, ul, dl {
	margin: 0 0 .75em 0;	
}

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

ol li {
	position: relative;
	left: 2.25em;
	padding-right: 2.25em;
}
	
ul li {
	position: relative;
	left: 1.25em;
	padding-right: 1.25em;
}

.noindent li {
    left: 0;
    padding-right: 0;
    list-style: none;
    margin-bottom: .75em;	
}

h3 + ol.noindent {
	margin-top: 0.8em;		/* Soma page list */
}

p + h3,
ol + h3,
ul + h3 {
	margin-top: 1.5em;	
}


blockquote {
	position: relative;
	color: #504619;  	/* dark olive */
	font-style: italic;
}

#content blockquote,
#primary blockquote {
	font-size: 1.125em;	/* match #secondary font-size */	
}

blockquote:before {
	font-family: Georgia, "Times New Roman", Times, serif;
	content: "\201C";
	font-size: 6em;
	line-height: 0.01;
	margin-left: -0.1em;
	vertical-align: -0.65em;
	color: rgba(80, 70, 25, .5);
}

#content blockquote:before {
    margin-left: -.09em;	
}

.attrib {
	font-size: 90%;
	line-height: 1.5;
	margin-top: 2.5em;
}

.quotemark {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 6em;
	color: rgba(80, 70, 25, .5);
	float: right;
	padding-right: .1em;
	margin-top: -.35em;
	background-color: none;
}

#content .quotemark {
    margin-top: -.36em;	
}


#primary .widget + .widget {
	margin-top: 3.375em;
}

#secondary .widget + .widget {
	margin-top: 6.375em;
}

/* HEADLINES */

h1, h2, h3, h4 {
	line-height: 1.2;	
	text-transform: uppercase;
}

h2 {
	font-size: 2.5em;
	font-weight: normal;
	color: #5A0C00;	/* very dark red nearly black */
	margin-bottom: .125em;	/* 5px */
}

h3 {
	font-size: 1.25em;
	margin-bottom: 0.444em;
}

/* LAYOUT */

.wrapper {
	width: 92%;
	max-width: 1120px;
	max-width: 70rem;
	margin: 0 auto 1.25rem; 		/* 20 / 16 */
	overflow: hidden;
}


/* BLUEBERRY SLIDE CAROUSEL
	http://marktyrrell.com/labs/blueberry/
*/

/* RESETS */
.blueberry ul,
.blueberry li {
	margin: 0;
	padding: 0;	
}

.blueberry {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#512200+0,8f0101+16,d05700+50,512200+100 */
background: #512200; /* Old browsers */
background: -moz-linear-gradient(left, #512200 0%, #8f0101 16%, #d05700 50%, #512200 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #512200 0%,#8f0101 16%,#d05700 50%,#512200 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #512200 0%,#8f0101 16%,#d05700 50%,#512200 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#512200', endColorstr='#512200',GradientType=1 ); /* IE6-9 */
	
	height: 333px;
	overflow: hidden;
	margin: 0 auto;
}

.blueberry .slide-container {    /* avoid putting padding or margin on .slides! 
										Instead, wrap with a div, put padding there. */
	max-width: 1200px;	/* wider than wrapper */
	max-width: 75rem;	/* wider than wrapper */
	margin: auto;
}

.blueberry .slides {
	display: block;
	position: relative;
	overflow: hidden;	
	width: 100%;
}
.blueberry .slides li {
	position: absolute;
		width: 100%;	/* needed to avoid janky transition between slides */
	top: 0;
	left: 0;
	overflow: hidden;
}
.blueberry .slides li img {
	display: block;
	max-width: none;
	float: right;
}
.blueberry .slides li.active { 
	display: block; 
	position: relative;
}

.blueberry .crop li img { 
	width: auto; 
}

.blueberry .pager {
	height: 40px;
	text-align: center;
	display: none;
}

.blueberry .pager li { 
	display: inline-block; 
}

.blueberry .pager li a,
.blueberry .pager li a span {
	display: block;
	height: 4px;
	width: 4px;
}

.blueberry .pager li a {
	padding: 18px 8px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.blueberry .pager li a span {
	overflow: hidden;
	background: #c0c0c0;
	text-indent: -9999px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
.blueberry .pager li.active a span { 
	background: #404040; 
}

.blueberry .textbox {
	float: left;
	width: 40%;
	font-size: 2.5em;
	font-style: italic;
	line-height: 1.6;		
	color: #FFDD4F;	/* bright yellow */
	text-shadow: 1px 1px 5px #512200;
	padding: 1.5em 0 1.5em 4%;		/* --------------- left padding matches left margin on .wrapper -------------------------- */
}

.blueberry .textbox b {
	font-weight: bold;
}


/* MAIN CONTENT DIV WITH TWO NARROW SIDEBARS */

#middle {												
	clear: both;
	overflow: hidden;
	padding: 1.5em 0;	
}

#container {		/* encloses two sidebars */
	width: 648px;	
	width: 48.75%; 	/* 468/960 */
	width: 48%;
	float: right;
	padding-top: 1.953em;
}

#content {
	width: 648px;
	width: 48.75%; 	/* 468/960 */
	width: 48%;
	float: left;	
}

#primary {
	width: 47%;	/* 222/648 */	
	float: left;
}

#secondary {
	width: 47%;		/* 222/648 */	
	float: right;
	color: #504619;  	/* dark olive */
	font-style: italic;
	font-size: 1.125em;
}

#footer {
	overflow: hidden;
	background-color: #D05700;	/* medium orange */
	padding: 1.25em 0;
	color: #2B2605;		/* very dark olive nearly black */
	color: #FFF;
}

/* ABOUT PAGE ONLY */

.about #primary {
	margin-top: 2.5em;
}


/* "B" LAYOUT: Wide right sidebar (soma page) */

.b #primary {
	width: 100%;	
}

.b #secondary {
	width: 48%;
	float: left;
	clear: left;
}

.b #secondary .widget {
	width: 75%;
}

.b #secondary .widget + .widget {
	margin-top: 3.375em;
}

.b #secondary blockquote:before {
	margin-left: -0.085em;
}


/* HEADER */
header {
	overflow: hidden; 
	padding-top: 1em; 
}

#logo,
#logo-soma {
	float: left;
	margin-right: 8px;	
}

header h1 span {
	display: none;	
}
			
h1 {
	float: left;
	margin-right: 	24px;	
}
	
h1 a:link, 
h1 a:visited {
	color: #8F0101;	/* rich rust */
	text-decoration: none;
}

h1 a:hover, 
h1 a:focus {
	color: #5A0C00;	/* very dark red nearly black */
	text-decoration: none;
}

/*
.description {
	font-style: italic;
	font-size: 1.1875em;	
	float: left;
	width: 50%;
}*/
	
/* "C" LAYOUT: sections / asides within the main element (pricing page) */

.c #content {
	width: 74.375%;
}

.c section {
	margin-bottom: 2em;	
}

.c .content {
	float: left;
	width: 65.546218%;
}

		.c .content p {
			padding-right: 1.5em;
			border-right: 6px solid rgba(90, 12, 0, .2);	
		}
	
.c .primary {
	float: right;
	width: 31.092437%;
	margin-top: 2.1em;
}
	
.c section {
	margin-bottom: 1.5em;
	overflow: hidden;
}

.c #secondary {
	float: right;
	width: 23.125%;	
}
	
			/* PRICING LAYOUT (WITH #PRIMARY) */
			.pricing #primary {
				margin-top: 3.4em;	
			}
	
	
	
/* NAV STYLES */

/* reset global list styles */
nav li,
footer li,
.blueberry li {
	position: static;
	left: 0;
	padding: 0;
	margin: 0;	
	list-style: none;
}

/* MAIN NAV */

#nav-main {
	float: right;
	margin-top: 1.7em;
}

#nav-main ul {
	float: left;
	text-align: left;
	text-transform: lowercase;
	margin: 0;			/* reset global ul margins: adjust left margin as needed */
}

#nav-main li {
	float: left;
	list-style-type: none;
}

#nav-main a {
	color: #8F0101;	/* rich rust */
	display: block;
	text-decoration: none;
	padding: 0 .8em 1em;
	border-bottom: 6px solid #FFF;
}

#nav-main a:hover, 
#nav-main a:focus { 
	color: #5A0C00;	/* very dark red nearly black */
	border-bottom: 6px solid #DDCECC;	
	border-bottom: 6px solid rgba(90, 12, 0, .2);
}

/*	NAV-MAIN CURRENT PAGE STYLES*/

.home #nav-main .home a, 
.about #nav-main .about a, 
.soma #nav-main .soma a, 
.massage #nav-main .massage a, 
.pricing #nav-main .pricing a, 
.contact #nav-main .contact a {
	color: #5A0C00;	/* very dark red nearly black */
	border-bottom: 6px solid #A5A08C;	/* 5% olive green */
	border-bottom: 6px solid rgba(80, 70, 25, .5);
}

/* 	TOGGLE MOBILE NAV */

#nav-mobile {
	display: none;			/* not visible on wider screens */
	padding: 3px 0;
	margin-top: -20px;
	overflow: hidden;
	text-transform: lowercase;
}

#nav-mobile a:link,
#nav-mobile a:visited {
	color: #8F0101;	/* rich rust */ 		
	text-decoration: none;
}
#toggle-list a:hover,
#toggle-list a:focus {
	color: #5A0C00;	/* very dark red nearly black */		
	text-decoration: none;
}

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

#toggle-list a {
	display: block;
	padding: 6px 10px;
	padding: 0.375em 0.6250rem; 	
	border-bottom: 1px solid #8F0101;	/* rich rust */ 		
	font-size: 1.1em;
}

#toggle-list .last a {
	border-bottom: 0;	
}

#toggle-icon {
	display: block;
	width: 140px;
	padding: 0.375em 0.6250rem 0 0;
	float: right;
	text-align: right;
	font-size: 1.2em;
}

/* NAV-MOBILE CURRENT PAGE STYLES */

.home #nav-mobile .home a, 
.about #nav-mobile .about a, 
.soma #nav-mobile .soma a, 
.massage #nav-mobile .massage a, 
.pricing #nav-mobile .pricing a, 
.contact #nav-mobile .contact a {
	color: #5A0C00;	/* very dark red nearly black */
	font-weight: bold;
}


/* FOOTER */

#footer .widget {
	width: 30%;
	float: left;
	margin-right: 5%;
	
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
}

#footer .widget:nth-of-type(3n) {
	margin-right: 0;
}

#footer li {
	line-height: 1.8;	
}

#footer a:link, 
#footer a:visited {
    color: #FFF;
    text-decoration: none;
    border-bottom: 1px solid #FFF;
}
		
#footer a:hover, 
#footer a:focus {
    border-bottom: none;
}

				
/* MISC STYLES */
	
.alignnone {
	margin-bottom: 10px; 
}
	
.alignleft {	/* floated images */
	float: left;
	margin: 0 10px 10px 0px ; 
}
	
.alignright { 	/* floated images */
	float: right;
	margin: 0 0px 10px 10px; 
}
	
.clear {
	clear:both;
}

/* signature image on 404 page */
.four-04 #content img {
	max-width: 150px;	
}

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

					
@media (max-width: 850px) {

#nav-main {
	margin-top: 0;	
}

.blueberry .textbox {
    position: absolute;
	z-index: 1000;
}

#primary {
	width: 100%;
	margin-top: 0;
}

#secondary {
	width: 100%;	
}

#main {		/* wraps left sidebar and content div */
	width: 100%;			
 }
 
 
 .c #content {
    width: 100%;
}
 .c #secondary {
    float: left;
    width: 65.546218%;
}

.c #secondary blockquote:before {
	margin-left: -.09em;
}
}

@media (max-width: 700px) {
.c #secondary {
	width: 75%;
}

.c #secondary .quotemark {
	margin-top: -.3em;
}

#footer .widget {
    width: 45%;
	margin-bottom: 1.953em;
}
}
	
@media (max-width: 630px) {
.wrapper {
	width: 90%;
}
	
#nav-main {	
	display: none;
}

#nav-mobile {
	display: block;
}

header h1 {
	float: none;
	margin: 0 0 .5em 0;
}

#footer .widget {
	width: 100%;
	margin-right: 0;
}

#footer .widget:nth-of-type(3n) {
	margin-bottom: 3.375em;
}

.blueberry .textbox {
  width: 55%;
}
}
	
@media (max-width: 525px) {
/* SLIDER */		
.blueberry {
    background: transparent;
    height: 344px;
}

.blueberry .slides {
	height: 344px !important;
}

.blueberry .slides li img {
    width: 517px;
    height: 344px;
}

.blueberry .textbox {
    width: 100%;
    height: 344px;
	font-size: 2em;
}

.blueberry .textbox b {
	font-size: 1.5em;	
}
/* END SLIDER */	
	

.c .content {
	width: 100%;
}

.c .content p {
	padding: 0;
	border: 0;	
}

.c .primary {
    width: 100%;
    margin-top: .5em;
}

#container {
	width: 100%;
	padding: 0;	
}

#primary,
#content,
#secondary,
.b #secondary,
.c #secondary {
    width: 100%;
	padding-top: 1.5em;
}

.b #secondary .widget {
	width: 100%;	
}

.b #secondary .widget:first-of-type {
	margin-top: 0;
}	

#secondary blockquote:before {
	margin-left: -.08em;
}
}

@media (min-width: 1260px) {
.blueberry .slide-container  {
	padding-right: 40px;		/* avoid putting padding or margin on .slides! 
									Instead, wrap with a div, put padding there. */
}	
}