/*Theme Name: Barba Skin Clinic 2 Sidebars
Theme URI: /barbaskin-2-sidebars/
Description: Responsive custom WordPress Theme by Kandice Hutcheson.
Author: Kandice Hutcheson @ Khutcheson.com
Author URI: http://khutcheson.com
Version: 3.2*/

/* Sticking the font declarations here for ease of use */

@font-face {
	font-family: Avenir;
	font-style: normal;
	font-weight: 300;
	src: url('/wp-content/themes/barbaskin/fonts/AvenirLTStd-Light.otf');
}
@font-face {
	font-family: Avenir;
	font-style: normal;
	font-weight: 400;
	src: url('/wp-content/themes/barbaskin/fonts/AvenirLTStd-Medium.otf');
}
@font-face {
	font-family: Avenir;
	font-style: normal;
	font-weight: 700;
	src: url('/wp-content/themes/barbaskin/fonts/AvenirLTStd-Heavy.otf');
}
body {
	font-family: 'Avenir', sans-serif;
	font-weight: 300;
	color: #333333;
	font-size: 16px;
}
.mobileonly {
	display: block;
	visibility: visible;
}
.deskonly {
	display: none;
	visibility: collapse;
}
.utility { /* ****************blue bar at top ******************/
	display: none;
}
.social i.fa { /**social icons as font-awesome font*/
	color: rgb(188, 217, 231);
	background: rgb(154, 185, 203);
	font-size: 18pt;
	padding: 9px 0px;
	text-align: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin: 12px 2px;
}
.social i.fa:hover {
	background: #80a1b5;
}
svg { /*the social icons as vector images :) */
	fill: #9ab9cb;
	width: 40px;
	height: 40px;
	margin: 10px 0px 0 0;
}
svg:hover {
	fill: #80a1b5;
}
a.brand img { /* mobile logo*/
	max-width: 125px;
	position: absolute; /*get out of the way of clicking the navbar icon*/
	top: 10px;
	left: 10px;
	z-index: 1000;
}
header {
	border-bottom: 2px solid #f0f0f0;
	padding-bottom: 20px;
}
header, navbar-header { /*hold mobile header open so can see absolutely positioned logo*/
	min-height: 100px;
}
header div.row-fluid.container-fluid, header div.row-fluid.container-fluid div.col-xs-12 {
	padding: 0;
}
.center-block div {
	display: block;
	text-align: center;
	margin: auto;
}
.content a, .content a:hover, footer a:hover, header a:hover {
	color: #8DA1B5;
}
.blog a, .blog a:hover {
	/*color: #80a1b5;*/
	color: #666;
}
.wpcf7-list-item-label {
    color: #000;
}
footer .wpcf7-form-control-wrap.checkbox-339 {
	font-size: 0.8em;
}
footer form a:hover{
    color: white;
}
/* ------========Search on the Press/blog pages====== -------*/
#blog-search {
	margin-bottom:27px;
}

#blog-search .form-control {
	box-shadow: none;
	border-radius: 0;
	width: 77%;
	float: left;
	border: none;
}
#blog-search #my_search{
	background-color: #F0F0F0;
	color: #81A2B5;
}


div#blog-search form {
    background: transparent;
    width: 100%;
}
#blog-search label{
	display:none;
}

#blog-search input#submit{
   color:white;
   background:#8DA1B5;
   width: 23%;
}

#blog-search input#submit:hover{
	color:white;
	background:#9EC3D9;
	transition: all 0.8s ease 0s;
}

#blog-search input#submit:hover{
   cursor: pointer;
}
#blog-search #submit:before{
   font-family:'FontAwesome';
   content:'\f002';
   position: absolute;
   margin: 2px 0px 0px -18px;
}

#blog-search #s{
	height:26px;
	vertical-align:top;
	border:1px solid #8DA1B5;
}

#blog-search .btn-info{
	background:#9EC3D9;
	height:30px;
	border:none;
	padding: 5px 16px;
	font-weight: inherit;
	
}
#blog-search .btn-info:hover{
	color:white;
	background:#8DA1B5;
	transition: all 0.8s ease 0s;
}

.modal-content{
	border-radius: none;
}

.modal-content h4{
	font-weight: bold;
	font-size: 15px;
}
.modal-dialog{
	margin: 20% auto;
	width: 67%;
}
.modal-dialog .btn-default{
	color:white;
	background:#9EC3D9;
	width:80px;
	height:auto;
	border:none;
}

.modal-dialog .btn-default:hover{
	color:white;
	background:#8DA1B5;
	transition: all 0.8s ease 0s;
}
#or-search-opt{
	margin-top:13px;
}

.modal-footer {
	border-top:none;
}

@media screen and (max-width:600px){
	.modal-dialog{
		margin: 50% auto;
		width: 90%;
	}
}

/*----------Fix wordpress styles on images-------------------*/
img.alignleft, div.alignleft {
	float: left;
	padding: 0px 10px 10px 0px;
	width: inherit;
}
img.aligncenter, div.aligncenter {
	width: inherit;
	margin: auto;
	text-align: center;
	clear: both;
	display: block;
}
img.alignright, div.alignright {
	float: right;
	padding: 0px 0px 10px 10px;
	width: inherit;
}
img.ajax-loader {
	width: initial;
	height: auto;
}
.wp-caption {
	text-align: center;
}
img {
	max-width: 100%;
	height: auto;
}
/*NEW Navigation Fix with 2 tier Nav support-------------*/
ul#menu-main-nav {
	position: fixed;
	background: transparent;
	right: 0%;
}
.navbar.navbar-default.navbar-fixed-top {
	position: relative;
}
ul.nav.navbar-nav {
	text-align: center;
}
.dropdown-submenu {
	position: relative;
}
.dropdown-submenu>.dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -6px;
	margin-left: -1px;
	-webkit-border-radius: 0 6px 6px 6px;
	-moz-border-radius: 0 6px 6px 6px;
	border-radius: 0 6px 6px 6px;
	-webkit-transition: all .8s ease;
	-moz-transition: all .8s ease;
	-o-transition: all .8s ease;
	transition: all .8s ease;
}
.dropdown-submenu:hover>.dropdown-menu {
	display: block;
}
.dropdown-submenu>a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: #cccccc;
	margin-top: 5px;
	margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
	border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
	float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
	left: -100%;
	margin-left: 10px;
	-webkit-border-radius: 6px 0 6px 6px;
	-moz-border-radius: 6px 0 6px 6px;
	border-radius: 6px 0 6px 6px;


}
.navbar-default {
	background: #024f9d;
	border: none;
	z-index: 1;
}
.navbar-default .navbar-toggle:hover {
	background-color: #fff;
	color: #9EC2D8;
	border: 3px solid #9EC2D8;
}
.navbar-default .navbar-toggle:hover .icon-bar {
	background-color: #9EC2D8;
}
/* Hover effect.. */
.navbar-toggle:hover, .navbar-toggle:hover .icon-bar {
	background-color: #8EB2C8;
}
.navbar-default .navbar-nav > li > a {
	color: #fff;
}
.navbar-default .navbar-toggle .icon-bar { /*3 lines in the mobile nav button*/
	background-color: #9EC2D8;
	margin-bottom: 6px;
}
.navbar-collapse.in { /* WEIRD override bootstrap to not show scrollbar on hover on the mobile nav  */
	overflow: visible;
}
.navbar-default .navbar-collapse { /*   mobile dropdown - first main nav level */
	background-color: #9fc3d9;
}
ul#menu-main-nav {
	margin-top: 0px;
	background: #80a1b5;
	border: none;
}
a.dropdown-toggle {
	background: transparent;
	-webkit-transition: all .8s ease;
	-moz-transition: all .8s ease;
	-o-transition: all .8s ease;
	transition: all .8s ease;
}
.navbar-default .navbar-toggle,  .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background: #fff;
	border: 3px solid #9EC2D8;
}
.navbar-toggle { /* the hamburger icon*/
	padding: 8px 5px;
	padding-bottom: 2px;
	border-radius: 6px;
}
.clearfix:after { /*needed on parent of hamb icon to keep the phone # under it. */
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
	background: green;
	color: #fff;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
	background-color: #6293be;
	color: #fff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	background-color: #bcd9e7;
	color: #fff;
}
span.visible-xs.phone {
	/* ----- v ---- probably the best way to align the phone down, since there's a px-based font size */
	padding: 13px 5px 0 0;
	padding-right: 15px; /* I forgot how to set minified padding... */
	white-space: nowrap;
	text-align: right;
	font-size: 18px;
	color: #333333;
	letter-spacing: -1px;
}
.glyphicon.glyphicon-earphone {
	color: #bcd9e7;
}
.dropdown:hover .dropdown-menu {
	display: block;
}
.navbar-nav > li > .dropdown-menu {
	background-color: #80a1b5;
	border: none;
}
.navbar-nav > li > .dropdown-menu a {
	color: #fff;
	-webkit-transition: all .8s ease;
	-moz-transition: all .8s ease;
	-o-transition: all .8s ease;
	transition: all .8s ease;
}
.dropdown-submenu:hover>.dropdown-menu {
	background-color: #024f9d;
}
.dropdown-menu > li > a {
	color: #fff;
	padding: 10px 20px;
}
nav.navbar.navbar-default {
	margin: auto;
	border-radius: 0px;
	background: transparent;
	border: none;
	border-left: none;
	border-right: none;
}
.navbar .nav, .navbar .nav > li {/*make nav center*/
	float: none;
	display: block;
	vertical-align: top;
}
.navbar-inner {/*make nav center*/
	text-align: center;
}
.navbar-default .navbar-nav>.active>a {
	background-color: transparent;
	font-weight: bold;
}
.navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
	background: #bcd9e7;
	color: #80a1b5 !important;/* font-size: 1.5em; */
}
.navbar-default .navbar-nav>li>a {
	color: #ffffff;
	-webkit-transition: all .8s ease;
	-moz-transition: all .8s ease;
	-o-transition: all .8s ease;
	transition: all .8s ease;
	text-transform: uppercase;
	padding: 15px 15px;
}
.navbar-default .navbar-nav>li>a:hover {
	background: #bcd9e7 !important;/* color: #fff !important; */
}
/*main content area --------------*/

section#content.content { /*the space inbetween the rows of callouts on homepage set to 0 for mobile, 30px for desktop starting at 768px*/
	padding-bottom: 0;
}
.container-fluid {
	max-width: 1500px;
	margin: auto;
}
#our-posts h2{
    margin-top: 20px
}

.blog-press{
	position: relative;
	padding-bottom: 23px;
}
a.read-more {
	background-color: #9EC3D9;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	text-align: center;
	width: 150px;
	display: block;
	margin: 10px auto;
	-webkit-transition: all .8s ease;
	-moz-transition: all .8s ease;
	-o-transition: all .8s ease;
	transition: all .8s ease;
  position: absolute;
	right: 0;
	margin-top:12px;
}
a.read-more:hover {
	color: #fff;
	background-color: #7EA3B9;
	text-decoration: none;
}
#our-posts hr {
    margin-top: 34.7px;
    border-top: 1px solid #333333;
}
.container.press {
    width: 100%;
	padding-left:0;
	padding-right:0;
}
#masonry-index{
	padding:0;
	margin-top:20px;
	border:1px solid white;
}
#masonry-index .index-post-container{
    width: 203px;
    float: left;
    margin: 0 32px 32px 0;
	display:block;
	height:auto !important;
}
/*================ masonry LAYOUT ====-sizes------>>>*/
@media screen and (min-width:1289px) and (max-width:1315px){
	#masonry-index .index-post-container {
		margin: 0 23px 23px 0;
	}
}
@media screen and (min-width:1260px) and (max-width:1287px){
	#masonry-index .index-post-container {
		margin: 0 20px 20px 0;
	}
}
@media screen and (min-width:1231px) and (max-width:1259px){
	#masonry-index .index-post-container {
		margin: 0 17px 17px 0;
	}
}
@media screen and (min-width:1197px) and (max-width:1227px){
#masonry-index .index-post-container {
		width: 197px;
		margin: 0 17px 17px 0;
	}
}
@media screen and (min-width:1143px) and (max-width:1196px){
	#masonry-index .index-post-container {
		width: 187px;
		margin: 0 17px 17px 0;
	}
}
@media screen and (min-width:912px) and (max-width:994px){
	#masonry-index .index-post-container {
		width: 197px;
		margin: 0 17px 17px 0;
	}
}
@media screen and (min-width:858px) and (max-width:911px){
	#masonry-index {
    	padding-left: 20px;
	}
	#masonry-index .index-post-container {
		width: 170px;
		margin: 0 23.7px 23.7px 0;
	}
}
@media screen and (min-width:769px) and (max-width:857px){
	#masonry-index .index-post-container {
		width: 162.7px;
		margin: 0 15.7px 16.7px 0;
	}
}

/*================ masonry LAYOUT ====---at and below 768px--->>>*/
@media screen and (max-width:768px){
	#main-page-content.col-sm-9, .container.press .col-sm-3{
		width:100%;
	}
	#masonry-index{
		padding-left: 20px;
	}
	#masonry-index .index-post-container {
		margin: 0 31px 30px 0;
	}
	.press-sidebar-image {
		display: block;
		text-align: center;
		background: #9EC3D9;
	}
}
@media screen and (min-width:756px) and (max-width:767px){
	#masonry-index .index-post-container {
		margin: 0 27px 27px 0;
	}
}
@media screen and (min-width:719px) and (max-width:756px){
	#masonry-index .index-post-container {
		width: 187px;	
	}
}
@media screen and (min-width:706px) and (max-width:718px){
	#masonry-index .index-post-container {
		width: 187px;
		margin: 0 27px 27px 0;
	}
}
@media screen and (min-width:688px) and (max-width:706px){
	#masonry-index .index-post-container {
		width: 177px;
	}
}
@media screen and (max-width:533px){
	#masonry-index{
		padding-left:0;
	}
	#masonry-index .index-post-container {
		margin-top:29px;
		margin-left:29%;
	}
}
@media screen and (max-width:457px){
	#masonry-index .index-post-container {
		margin-left:27%;
	}
}
@media screen and (max-width:457px){
	#masonry-index .index-post-container {
		margin-left:23%;
	}
}
@media screen and (max-width:383px){
	#masonry-index .index-post-container {
		margin-left:20%;
	}
}
@media screen and (max-width:358px){
	#masonry-index .index-post-container {
		margin-left:17%;
	}
}
/*================ masonry LAYOUT ====----END--->>>*/
.page-navi {
    margin-top: -12px;
}
section#page-content {
	max-width: 1300px;
	padding-top: 3rem;
    padding-bottom: 3rem;
	font-size: 14px;
	line-height: 1.5 !important;
}
.container.press{
	padding-bottom: 3.7%;
}
#page-content .well {
	background-color: #D5E7EF;
	border: 1px solid #9EC3D9;
}
/*home welcome styles--------*/
.home-welcome h2 {
	color: #80A3B7;
	font-weight: lighter;
	text-align: center;
}
/*accordion styles-----------------*/
.accordion-heading .accordion-toggle:before {
	/* symbol for "opening" panels */
	font-family: 'FontAwesome';  /* essential for enabling glyphicon */
	content: "\f107";    /* adjust as needed, taken from bootstrap.css */
	float: left;       /* adjust as needed */
	padding-right: 10px;
	color: #BCD9E7;       /* adjust as needed */
}
.accordion-heading .accordion-toggle.collapsed:before {
	/* symbol for "collapsed" panels */
	content: "\f105" !important;    /* adjust as needed, taken from bootstrap.css */
	padding-right: 15px;
	color: #BCD9E7;
}
.accordion-heading {
	font-weight: bold;
	font-size: 18px;
	padding: 10px 0px;
}
.accordion-inner {
	padding: 0px 20px;
}
h3.blue-text {
	color: #9EC3D9;
	font-size: 18px;
}
img.clinical-featured.wp-post-image { /**special for clinical facials featured image **/
	float: left;
	width: auto;
	height: auto;
	padding: 20px 20px 20px 0px;
	display: inline-block;
	max-width: 187px;
}
/*hero styles-----------------*/ /*       <~ I don't know what that is yet         */
a.down {
	clear: both;
	display: block;
	font-size: 6em;
	border: 4px solid;
	border-radius: 50%;
	text-align: center;
	line-height: 1em;
	width: 94px;
	height: 92px;
	margin: 80px auto auto auto;
	color: #fff;
	text-shadow: none;
}
a.down:hover {
	background: #e4e4e4;
	background: transparent\2;
	background: rgba(228, 228, 228, 0.2);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
	color: #e4e4e4;
}
.item img {
	width: 100%;
	min-height: 300px;
	width: auto;
	overflow: hidden;
}
.item.active {
	width: 100%;
	min-height: 300px;
}
a.btn.btn-lg.btn-primary {
	background-color: #9ab9cd;
	border-radius: 0px;
	border: 2px solid #fff;
	color: #fff;
	margin-top: 10px;
	-webkit-transition: all .8s ease;
	-moz-transition: all .8s ease;
	-o-transition: all .8s ease;
	transition: all .8s ease;
	text-transform: uppercase;
	width: 250px;
	position: absolute;
	left: 0;
}
a.btn.btn-lg.btn-primary:hover {
	background: #bcd9e8;
	color: #80a1b5;
}
/* ha ha.. I crack myself up sometimes */
.mobile-phone {
	height: 15px;
	position: relative;
	top: -3px;
}
/* Sandys hero for home page */


#hero {
	position: relative;
	margin-bottom: 3px;
}
#slogan {
	background-color: #bcd9e7;
	width: 100%;
	color: #000000;
}
#slogan h2 {
	color: #333;
	margin: 0;
	padding: 15px 10px;
	font-size: 15px;
	text-align: center;
}
#bookhero { /*mobile bg for book button*/
	background-color: #bcd9e7;
	width: 100%;
	height: 75px;
	border-bottom: 2px solid #bbb;
}
#bookhero h3 { /*the mobile book button*/
	width: 94%;
	display: block;
	margin: 0 auto;
	line-height: 18px;
	/*font-size:18px;*/
	text-align: center;
	border: 2px solid #ffffff;
	position: relative;
	top: 15px;
	border-radius: 10px;
}
#bookhero h3 a {/*the mobile book button*/
	color: #ffffff;
	display: block;
	background-color: #80a0b5;
	padding: 14px 0;
	text-transform: uppercase;
	/* You need both of these for it to work */
	border-radius: 10px;
}
#slogan-link {
	display: block;
	text-align: center;
	background-color: #9EC3D9;
	color: #fff;
	border: 6px solid #fff;
	font-size: 30px;
	padding: 16px 0px;
	text-decoration: none;
}
#slogan-link:hover {
	background-color: #fff;
	color: #9EC3D9;
}
.sloganpic {
	visibility: collapse;
	display: none;
}
.down {
/* display:none; */
		/* visibility:collapse; */	
}
/* Large callouts on home page */
.call {
	position: relative;
}
.col-xs-12.call {
	padding: 0; /* to make MOBILE callouts image float all the way left */
}
.call img {
	width: 20%;/*mobile*/
	height: auto;
	float: left;
}
span.calltitle {
	float: right;
	width: 75%; /*mobile*/
	background-color: #ffffff;
	opacity: 0.9;
	/*for mobile only*/
	position: relative;
	top: 30px;
	left: 5px;
}
span.calltitletext {
	color: #99acba;
}
body.page-id-23 .wp-caption img {
	border-radius: 15px;
}
span.calltitletext a {
	color: #85a5b8;
}
/*#page-content form {
	max-width: 300px;
	margin: 20px 0px;
	background-color: #8DA1B5;
	padding: 20px;
	border-radius: 20px;
}*/
footer form img {
	width: auto;
}
/**services page new styles**/
img.services-thumbs {
	max-width: 124px;
	height: auto;
	margin: 0 15px 15px 0;
}

@media screen and (max-width:800px) {
img.services-thumbs {
	margin: 0 0 0 0 !important;
	}
}
article.srv-container {
	padding: 0 0 0 0 !important;
	display: inline-block;
	margin-bottom: 20px;
}
/**google map style---------*/
#map-canvas {
	background: #ccc;
	height: 300px;
	color: inherit;
	border: 1px solid #9EC3D9;
	margin: 20px 0px;
}
footer #map-canvas {
	height: 200px;
	color: #333;
}
footer #map-canvas div#content p, footer #map-canvas div#content a {
	font-size: 12px !important;
	color: #333;
}
footer #map-canvas h4#firstHeading {
	font-size: 14px;
	margin: 0px;
}
/** FIX for Bootstrap and Google Maps Info window styes problem **/
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
	max-width: none;
}
.wpcf7-form p {
	margin-bottom: 0px;
}
/**list on meet our teem styles (and others as needed)**/
a.list-group-item {
	background: #8DA1B5;
	margin: auto;
	float: none;
	display: block;
	color: #fff;
	border-radius: 10px;
}
div.list-group-item {
	margin: auto;
	float: none;
	display: block;
	clear: both;
}
.list-group.col-sm-4 {
	float: none !important;
	clear: both;
	margin: auto;
}
a.list-group-item:first-child, a.list-group-item:last-child {
	border-radius: 10px;
}
/*footer styles-------------*/
footer {
	background: #8da1b5;
	color: #fff;
	padding: 20px 0px;
	padding-bottom: 0px;
	min-height: 150px !important;
}
footer a {
	color: #fff;
}
footer ul {
	padding: 0px;
	text-align: center;
}
footer ul li {
	list-style-type: none;
	display: inline-block;
}
footer ul li a {
	padding: 5px;
	color: #fff;
}
/* footer menu */
footer .container-fluid {
	max-width: 1200px; /*because desktop is only 70% width to match the comp*/
}
footer p {
	font-size: 18px;
}
.menu-footer-with-sitemap-container a {
	color: #ffffff;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 300;
}

.menu-footer-with-sitemap-container a:hover {
	color: #ffffff;
}
.menu-footer-with-sitemap-container li {
	display: block;
	padding-bottom: 20px;
}
footer iframe {
	width: 100%;
	max-width: 400px;
	display: block;
	margin: 0 auto;
}
footer form *, .content form * { /*no inputs of any type should be larger than the actual form itself. */
	max-width: 100%;
	width: 100%;
	font-size: 16px;
}
footer div.wpcf7-response-output{
	margin:0;
	margin-bottom: 1.7rem!important;
  color: white;
	border: 2px solid yellow;
}
footer form input, footer form textarea, .content form input, .content form textarea {
	margin-bottom: 5px;
	color: #666666;
}
footer form input, .content form input {
	margin-bottom: 5px;
	line-height: 1em;
}

.wpcf7-form input, .wpcf7-form textarea {
	padding: 8px 10px;
	line-height: 1em;
}
.wpcf7-form textarea {
	height: 120px;
}
input[type="checkbox"] {
	border: 1px solid red;
	width: 30px;
	height: 30px;
	position: relative;
	top: 5px;
}
input[type="checkbox"] {
	width: 18px;
	height: 18px;
}
input[type="submit"] {
	background-color: #bcd9e8;
	color: #666666;
	border: none;
	outline: none;
}
span.wpcf7-not-valid-tip {
	color: #000000;
}

.lightbluebg {
	/*background-color:#e4e4e4;*/
	background-color: #9EC2D8;
	color: #4A7E8C;
	font-size: 0.8em;
	padding: 10px 0px;
}
.lightbluebg .container-fluid {
	padding-left: 0px;
	padding-right: 0px;
}
.lightbluebg p {
	margin: 0px;
}
.lightbluebg a {
	text-decoration: underline;
	color: #2A5E6C;
}
.mobilefootadrs {
	font-size: 14px;
	margin-bottom: 5px;
	color: #666;
	line-height: 1.2em;
}
.mobilefootadrs svg { /*why won't these inherit the size from earlier in css?*/
	width: 35px;
	height: 35px;
}
.mobilefootadrs .text-center {
	margin-bottom: 2px;
}
.mobilesvgwrap i.fa { /**footer mobile only social icons as font-awesome font*/
	color: #fff;
}
.mobilesvgwrap {
	text-align: center;
}
.mobilesvgwrap svg {
	display: inline;
	width: 35px;
}
/* For lack of a better name */
#front-conditions {
	padding-bottom: 15px;
}
/*----------Fix wordpress styles on images-------------------*/
img.alignleft {
	float: left;
	padding: 0px 10px 10px 0px;
	width: inherit;
}
img.aligncenter {
	width: inherit;
	margin: auto;
	text-align: center;
	clear: both;
	display: block;
}
img.alignright {
	float: right;
	padding: 0px 0px 10px 10px;
	width: inherit;
}
img.ajax-loader {
	width: initial;
	height: auto;
}
/*sidebar testimonials*/
aside blockquote {
	font-size: 14px;
	font-style: italic;
	border: 1px solid #fff;
	margin: 20px 0;
	padding: 10px;
	border-radius: 20px 0px 20px 0px;
	background: rgba(188, 217, 231, 0.61);
	/*	text-align: justify*/;
}
blockquote cite {
	font-weight: bold;
	display: block;
}
aside blockquote:hover {
	border: 1px solid #8DA1B5;
}

/* Fixes some spacing issues with the big titles */

@media screen and (min-width: 769px) {
	.call span.calltitle {
		font-size: 1.1em;
	}
	.call span.calltitle {
		padding: 0.5em 12px;
	}
	.lightbluebg {
		background-color: #e4e4e4;
		color: #666;
	}
	.lightbluebg a {
		color: #333;
	}
}
@media screen and (max-width: 922px) {
	.call span.calltitle {
		font-size: .87em;
	}
}

@media screen and (min-width: 1247px) {
.call span.calltitle {
	font-size: 1.3em;
}
}

@media screen and (min-width: 441px) { /*need to wrangle the mobile  number a bit in between media queries*/
 . {
 float:none;
 position:relative;
 top:60px;
 left:50px;
}
}

@media screen and (max-width: 766px) { /* make these center on mobiles smaller than tablets*/
.lightbluebg p.text-left, .lightbluebg p.text-right {
	text-align: center !important;
}
#content > div:hover *, #front-conditions > div:hover *, #content div:hover, #front-conditions div:hover {
	font-weight: bold;
	color: ##99acba;
	transition: all ease-out .5s;
	/*background-color: #BCD9E7;*/
}

#content.home-welcome > div:hover, #content.home-welcome > div:hover p, #content.home-welcome > div:hover h2 {
	background-color: #fff;
	font-weight: lighter !important;
	color: inherit;
}
.calltitletext {
	font-size: 18px;
}
body.page article {
	padding: 10px 10px 10px 10px !important;
}
.accordion-heading {
	font-size: 14px;
	font-weight: normal;
	padding: 5px;
}
img.alignright, div.alignright { /*make images not wrap text on mobile*/
	margin: auto;
	float: none;
}
}

@media screen and (min-width: 768px) { /*ipad portrait*/
a.brand img { /* mobile logo*/
	max-width: 130px;
	position: absolute; /*get out of the way of clicking the navbar icon*/
	top: 10px;
	left: 10px;
	z-index: 1000;
	position: static;
	margin: 20px 0 20px 15px;
}
}
 @media screen and (min-width: 1024px) {
	/* Putting this here so the nav doesn't break horribly at mid-range sizes */
	a.brand img {
 margin: 20px 0 0px 75px;
}
}
.utility { /* ****************blue bar at top ******************/
	background-color: #bcd9e7;
	display: block;
}
.utility form {
	text-align: center;
	margin-left: -10px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.signup {
	line-height: 40px;

	margin-bottom: 0;

	text-align: center;
}
.tel {
	font-size: 24px;
	color: #4d4d4d;
	text-align: right;
	font-weight: 300;
	margin-top: 5px;
}
.utility form {
	float: right;
	margin-top: 5px;
	margin-left: 15px;
}
.utility input {
	float: left;
	line-height: 1em; /* Protip: use padding instead of line height on :inputs or it'll fail on IE */
	border: none;
	padding: 6px 10px;
}
#newsletter-email {
	background-color: #f0f0f0;
	color: #81A2B5;
}
.utility input[type="submit"] {
	background-color: #80A0B5;
	color: #bcd9e7;
	border: none;
	height: 30px;
	text-transform: uppercase;
	width: 40px;
}
.utility ::-webkit-input-placeholder {
 color: #80a1b5;
}
 .utility :-moz-placeholder { /* Firefox 18- */
 color: #80a1b5;
}
 .utility ::-moz-placeholder {  /* Firefox 19+ */
 color: #80a1b5;
}
 .utility :-ms-input-placeholder {
 color: #80a1b5;
}
ul#menu-main-nav {
	position: absolute;
	right: 0%;
	background: transparent;
}
.navbar-default .navbar-collapse { /* override mobile, so the blue bg doesn't carry through to the desktop*/
	background-color: #ffffff;
}
.navbar-default .navbar-nav>li>a { /*to override mobile white text link in nav*/
	color: #80a1b5 !important;
	font-size: 16px;
}
.navbar .nav, .navbar .nav > li {
	display: inline-block;
}
/*CALLOUTS FOR THE HOME PAGE */
.call {
	text-align: center;
}
.col-xs-12.call {
	padding-left: 0;
	padding-right: 0;/*remove default padding so image can be 100% width of the parent*/
	width: 23%;  /*reduce overall size of the parent by 2% to allow for margin space inbetween */
	margin: 0px;
	margin: 1%;
}
@media screen and (max-width:764px){
	.col-xs-12.call {
		width: 100%;
		margin:0 0 12px 0;
	}
}
.call img {
	width: 100%;
	height: auto;
	float: none;
	border: 2px solid #ffffff;
}
.call span.calltitle {
	float: none;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border: 2px solid #85a5b8;
	padding: 0.5em 0px;
}
.call a:hover img { /*hover treatment to remove image on hover and let the background image (with text) show "through" on hover */
	border: 2px solid #85a5b8;
}
/*jquery when on hover, change the class of calltitle to calltitlehover in barbascripts.js    :*/
.call span.calltitlehover {
	background-color: #85a5b8;
	color: #ffffff;
	width: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
#call1 {
	background-image: url(images/call1hover.jpg); /*the text shown on hover is really in an image that is laying underneath */
	background-repeat: no-repeat;
	background-size: cover;
	border: 2px solid transparent;
}
#call1.call a:hover img { /*hover treatment to remove image on hover and let the background image (with text) show "through" on hover */
	opacity: 0;
}
#call1:hover {
	border-left: 2px solid #85a5b8;
	border-right: 2px solid #85a5b8;
	border-bottom: 2px solid #85a5b8;
}
#call2 {
	background-image: url(images/call2hover.jpg); /*the text shown on hover is really in an image that is laying underneath */
	background-repeat: no-repeat;
	background-size: cover;
	border: 2px solid transparent;
}
#call2.call a:hover img { /*hover treatment to remove image on hover and let the background image (with text) show "through" on hover */
	opacity: 0;
}
#call2:hover {
	border-left: 2px solid #85a5b8;
	border-right: 2px solid #85a5b8;
	border-bottom: 2px solid #85a5b8;
}
#call3 {
	background-image: url(images/call3hover.jpg); /*the text shown on hover is really in an image that is laying underneath */
	background-repeat: no-repeat;
	background-size: cover;
	border: 2px solid transparent;
}
#call3.call a:hover img { /*hover treatment to remove image on hover and let the background image (with text) show "through" on hover */
	opacity: 0;
}
#call3:hover {
	border-left: 2px solid #85a5b8;
	border-right: 2px solid #85a5b8;
	border-bottom: 2px solid #85a5b8;
}
#call4 {
	background-image: url(images/call4hover.jpg); /*the text shown on hover is really in an image that is laying underneath */
	background-repeat: no-repeat;
	background-size: cover;
	border: 2px solid transparent;
}
#call4.call a:hover img { /*hover treatment to remove image on hover and let the background image (with text) show "through" on hover */
	opacity: 0;
}
#call4:hover {
	border-left: 2px solid #85a5b8;
	border-right: 2px solid #85a5b8;
	border-bottom: 2px solid #85a5b8;
}
#call5 {
	background-image: url(images/call5hover.jpg); /*the text shown on hover is really in an image that is laying underneath */
	background-repeat: no-repeat;
	background-size: cover;
	border: 2px solid transparent;
}
#call5.call a:hover img { /*hover treatment to remove image on hover and let the background image (with text) show "through" on hover */
	opacity: 0;
}
#call5:hover {
	border-left: 2px solid #85a5b8;
	border-right: 2px solid #85a5b8;
	border-bottom: 2px solid #85a5b8;
}
#call6 {
	background-image: url(images/call6hover.jpg); /*the text shown on hover is really in an image that is laying underneath */
	background-repeat: no-repeat;
	background-size: cover;
	border: 2px solid transparent;
}
#call6.call a:hover img { /*hover treatment to remove image on hover and let the background image (with text) show "through" on hover */
	opacity: 0;
}
#call6:hover {
	border-left: 2px solid #85a5b8;
	border-right: 2px solid #85a5b8;
	border-bottom: 2px solid #85a5b8;
}
#call7 {
	background-image: url(images/call7hover.jpg); /*the text shown on hover is really in an image that is laying underneath */
	background-repeat: no-repeat;
	background-size: cover;
	border: 2px solid transparent;
}
#call7.call a:hover img { /*hover treatment to remove image on hover and let the background image (with text) show "through" on hover */
	opacity: 0;
}
#call7:hover {
	border-left: 2px solid #85a5b8;
	border-right: 2px solid #85a5b8;
	border-bottom: 2px solid #85a5b8;
}
#call8 {
	background-image: url(images/call8hover.jpg); /*the text shown on hover is really in an image that is laying underneath */
	background-repeat: no-repeat;
	background-size: cover;
	border: 2px solid transparent;
}
#call8.call a:hover img { /*hover treatment to remove image on hover and let the background image (with text) show "through" on hover */
	opacity: 0;
}
#call8:hover {
	border-left: 2px solid #85a5b8;
	border-right: 2px solid #85a5b8;
	border-bottom: 2px solid #85a5b8;
}
section#content.content { /*the space inbetween the rows of callouts on homepage*/
	padding-bottom: 30px;
}
.home-welcome {
	padding: 30px 0px;
}
.wpcf7-submit {
	margin-top: 15px;
}
.mobileonly {
	display: none;
	visibility: collapse;
}
.deskonly {
	display: block;
	visibility: visible;
}
.sidebar-top {
	border: 2px solid #9EC3D9;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #7EA3B9;
	margin-top:10px;
	margin-bottom: 0px;
}
.container.press .sidebar-top.press-top{
	margin-top:20px;
}
.sidebar-top {
    border: 2px solid #9EC3D9;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #7EA3B9;
    margin-top: 10px;
    margin-bottom: 0px;
}
.barba-news-links .check-prices{
	margin-top: 10px;
	padding: 7px;
	border: 2px solid #9EC3D9;
	display: block;
	text-align: center;
	text-decoration: none;
}

#sidebar-follow-bottom {
	background-color: #9EC3D9;
	text-align: center;
	color: #fff;
	padding-bottom: 30px;
	margin-top: 0px;
}
#sidebar-follow-bottom p {
	padding: 20px 0px;
	padding-bottom: 10px;
	line-height: 1.4em;
	font-size: 1.4em;
}
#sidebar-follow-bottom a {
	display: inline !important;
}
body.page article,body.single article, body.category article {
	padding: 2rem 2rem;
} 
#breadcrumbs{ /*adjust for breadcrumbs on category pages*/
   margin-top:-3rem;
}

@media screen and (max-width:600px){
	#breadcrumbs {
    	margin-top: -2.7rem!important;
	}
}

/*new internal page styles*/
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
	color: #99acba;
	font-weight: lighter;
}
.box h1 {
	margin: 0px;
	color: #fff;
	text-transform: uppercase;
	font-weight: lighter;
	font-size:3rem;
}
.box {
	background: rgba(140, 161, 180, 0.7);
	display: inline-block;
	padding: 1rem 2rem;
	margin: 10rem 3rem 3rem 3rem;
	border-radius: 10px;
}
div#featured-banner {
	background-position: center center;
	background-size: cover;
}
#featured-banner header {
	border: none;
}
div#featured-banner .container-fluid {
	max-width: 1300px;
}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h5 {
	margin-top:0px;
}
.content h1{
	font-size: 3rem;
}
.content h2{
	font-size:2.4rem;
}
.content h3{
	font-size:2.0rem;
  
}
.content h4{
	font-size:1.8rem;
}
.content h5{
	font-size:1.6rem;
}
.content h6{
	font-size:1.4rem;
}

@media screen and (max-width:600px){
	#featured-banner, #featured-banner header{
	    margin:0;
	    padding:0;
	    min-height:1px;
	}
	
	#featured-banner .box {
	    padding: 2rem;
	    margin: 0;
	    display:block;
	    text-align:center;
	    min-height: 1px;
	    border-radius: 0px;
	}
	section#page-content{
	    padding-top:1rem;
	}
}
body .content .testimonials h1 {
	font-size: 1.2em;
	text-align: center;
	margin-top: 0px;
	color: inherit;
}
.left-sidebar h3 {
    font-size: 16px;
    text-transform: uppercase;
    margin:1rem 0 2rem 0;
}
aside h4 {
    font-size: 14px;
    border: 2px solid #9EC3D9;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #7EA3B9;
    margin: 1rem 0 0 0;
    border-bottom:0;
}
/*#new-sidebar { text-align: right; }*/

body.page #new-sidebar #sidebar-follow-sm img {
	width: 55px;
	height: 55px;
}
/*---- Right sidebar artile section ----*/

#search-article.row {
    margin: 10px 0 0 0;
    padding: 0px;
}
#new-sidebar #search-article ul{
	padding-left:11px;
	width: 50%;
	float:left;
}
@media screen and (min-width:769px) and (max-width:1100px){
	body #new-sidebar #search-article ul{
		float:none;
		width:100%;
	}
}
#new-sidebar #search-article ul li{
	list-style-type:none;
}

#sidebar-follow-sm i.fa { /**social icons as font-awesome font*/
	color: rgb(158, 195, 217);
	background: #fff;
	font-size: 18pt;
	padding: 9px 0px;
	text-align: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin: 12px 2px;
}
#sidebar-follow-sm i.fa:hover {
	background: rgb(188, 217, 231);
	color: #80A0B5;
}


/* Fixes a weird glitch */
}
@media screen and (max-width: 768px) {
body.page #new-sidebar {
	text-align: center;
}
body.page #new-sidebar * {
	float: none;
}
body.page #new-sidebar img {
/*height: 200px;
		width: auto;*/
}

section#content > div, section#front-conditions > div {
	border-bottom: 1px solid #dfdfdf;
}
header {
	padding-bottom: 0px;
}
}

@media screen and (min-width: 992px) {  /*when desktop-visible becomes visible; as in the slogan */
.sloganpic {
	visibility: visible;
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -130px;
	left: 50%;
	margin-left: -230px;
	width: 460px;
}
a:hover img.sloganpicbook {
	opacity: .8;/* why wont you work
		background-color: #fff !important;
		color: #428BCA !important;
		*/
}
img.sloganpicbook {
	border: 5px solid #ffffff;
}
.menu-footer-with-sitemap-container {
	margin-top: 50px;
}
.menu-footer-with-sitemap-container li {
	text-align: left;
}
}

/* Was going to be an @media fix.. but actually looks better in general */
@media screen and (min-width: 768px) {

.utility #newsletter-email {
	width: 150px;
}
}
@media screen and (min-width: 1024px) { /*ipad landscape*/
svg { /*the social icons as vector images :) */
	width: 40px;
	height: 40px;
}
}

@media screen and (min-width: 1120px) {  /*as soon as main nav is all in one line... */
	ul#menu-main-nav {
		margin: 37px;
	}
}
/* Fixes alignment issues */
footer h3, .menu-footer-with-sitemap-container {
	margin-top: 0px;
	padding-top: 0px;
}

@media screen and (min-width: 1251px) {  /*desktop*/
.signup {
	line-height: 60px;
}
.utility form {
	margin-top: 15px;
}
}

@media screen and (min-width: 1350px) {
img.down {
	position: absolute;
	margin-top: -200px;
	left: 50%;
	margin-left: -52px;
}
}

@media screen and (min-width: 1400px) {  /*desktop*/
    .down { /*the scroll down button only makes sense in super wide mode*/
        display: block;
        visibility: visible;
    }
    footer .container-fluid {
        max-width: 75%;
    }
    footer form {
        width: 75%;
    }
    .content form {
        width: 50%;
        margin-top: 30px;
        background: rgb(141, 161, 181);
        border-radius: 20px;
        color: #fff;
    }
    /*--- Control the form on the facial treatment page ----*/
    .content.facial-treatment-page form{
        width: 100%;
        background: none;
    }
    .content form a {
        color: #000;
    }
    .menu-footer-with-sitemap-container ul {
        margin-left: 75px;
    }
}
.signup form input {
    height: 30px !important;
}
.content.facial-treatment-page form .wpcf7-response-output{
    color: #000;
	  margin-left: 0;
}

/*fix mobile navigation*/
@media screen and (max-width:767px){
    ul#menu-main-nav, .navbar-nav > li > .dropdown-menu{
        background:#fff;
        position:relative;
        display:inline-block !important;
        width:100%;
        box-shadow:none;
    }
    ul#menu-main-nav li{
        display:block;
        text-align:right;
        width:100%;
        padding:0px;
    }
    ul#menu-main-nav li a{
        padding:0px;
        color:inherit;
    }

}