/*
Theme Name: Client name
Description: Child modifies Jumpstart 2.2.1 Parent
Author: ZoeSnyder . com
Template: jumpstart
*/

/* Your custom CSS here */

/* ==================== CSS Variables ==================== */

/*
:root {
	--color-black: #000;
	--color-red: #d91f35;
	--color-blue: #2bb5e9;
	--color-yellow: #faa819;
	--color-yellowmed: #f4bd19;
	--color-yellowlt: #f3d47b;
}
*/


/*
font-family: 'Open Sans', sans-serif;
font-weight: 300 400 700;

font-family: 'Aleo', serif;

font-family: 'Montserrat', sans-serif;
font-weight: 300 400 600;
*/

/* ========================= Table of Contents =========================/
 *                                                                     *
 * 1: CSS Variables                                                    *
 *                                                                     *
 * 2: Global Styles                                                    *
 * --- 2.1: Body Styles                                                *
 * --- 2.2: Header Styles                                              *
 * ------ 2.2.1: Primary Menu Styles                                   *
 * ------ 2.2.2: Sticky Menu Styles                                    *
 * ------ 2.2.3: Mobile Menu Styles                                    *
 * --- 2.3: Footer Styles                                              *
 * --- 2.4: Heading Styles                                             *
 * --- 2.5: Jumpstart Styles                                           *
 * ------ 2.5.1: Post List Styles                                      *
 * ------ 2.5.2: Post Grid Styles                                      *
 * ------ 2.5.3: Sidebar Styles                                        *
 * --- 2.6: Bootstrap Styles                                           *
 * --- 2.7: Blockquote Styles                                          *
 *                                                                     *
 * 3: Home Page                                                        *
 *                                                                     *
 * 4: Media Queries                                                    *
 * --- 4.1: Phone/Table/Laptop Styles                                  *
 * --- 4.2: Odd Media Query Styles                                     *
 *                                                                     *
/* =================================================================== */


/* ========================= 1: CSS Variables ========================= */


:root {
	--color-blueviolet: #272560;
	--color-purple: #403768;
	--color-turqlt: #49B1D6;
	--color-grass: #4FC219;	 
	--color-lemon: #F4BD19;
	
	--color-liqorice: #294B8E;
	--color-dkblue: #003159;
	--color-orange: #EF7A37;
	
	--color-turkdk: #287C9B;

	--color-text: #666;
	--color-jet: #333236;
	--height-sticky-header: 50px;
}

/* ========================= 2: Global Styles ========================= */

/* =============== 2.1: Body Styles =============== */

html, body {
	font-size: 18px;
}

body {
	background-color: white;
	color: var(--color-text);
	color: rgba(26,26,26,.7);
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	line-height: 1.5;
}

.lead{font-size:20px}

/* =============== 2.2: Header Styles =============== */


.header-top{/* background:#d5edc4; */
background:#bfe8ab; /* this is a shade of grass green */}


.header-top>.wrap,
.header-content>.wrap{
/* 	padding: 5px 10px; */
	padding:0;
	
}
header.site-header {
/* 	background-color: white; */
	background-image: url(http://dev.therapybyangelina.com/wp-content/uploads/2019/02/header-lake-reflection1.jpg);
	background-size:  cover;
/* 	border-bottom: .5px solid var(--color-lemon); */
}

header.site-header .header-text {
	color: var(--color-liqorice);
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	letter-spacing: 1px;
}

/*
header.site-header .header-text > a:hover {
	color: var(--color-bitter-lemon);
}
*/

.header-nav {
    background: #fff;
}

/*
.site-breadcrumbs {
	background:#f9f9f9;
	border-top:1px solid var(--color-grass);
	border-bottom:1px solid var(--color-grass);
	padding:0px;
}

#breadcrumbs > div > ul > li> a{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
}

.breadcrumb>.active{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
}
*/

/* -------- BEGIN copied header-text ----------- */
.header-text {
    float: right;
    background:transparent;
}

/* (phone) */
.header-text a {
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	color: black;
	background: var( --color-turqlt);
    float: right;
    padding: 2px 6px;
    font-size: 16px;
}

.header-text a:hover {
	background: #36891C;
	color:white;
}

/* (phone) */
.appoint a{
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	background: var( --color-orange);
    box-shadow: none;
    float: right;
    padding: 2px 6px;
    font-size: 16px;
    color: black;
    margin-left: 15px;
    text-transform: uppercase;
}

.appoint a:hover{
	background: #36891C;
	color:white;
}
.mappit a{
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	background: var(--color-grass);
    box-shadow: none;
    float: right;
    padding: 2px 6px;
    font-size: 16px;
    color: black;
    margin-left: 15px;
    text-transform: uppercase;
}

.mappit a:hover{
	background: #36891C;
	color:white;
}
/* This puts space after search icon in header-text */
.page .header-top-nav>li {
	padding-left: 6px;
	padding-right: 16px;
}

.svg-inline--fa.fa-fw {
/*
    width: 20px;
    height: 20px;
    margin: 0px 16px 0px 0px;
*/
}

/* -------- END copied text ----------- */
/*
.header-content .site-logo,
	.header-logo,.header-content .site-logo a {
    float: none;
    margin:0 auto;
	}
	
	#access{
 12-3-MON
		float:none;
		margin-top:0;
	}

.tb-primary-menu {
	text-align: center;
	}
 
	.sf-menu > li {
    float: none;
    display: inline-block;
	}
*/

/* --------------- 2.2.1: Primary Menu Styles --------------- */

/* Primary menu positioning */
header.site-header nav#access {
	background-color: #49B1D6;
/*
	float: right;
	margin-top:35px;
*/
}

.tb-primary-menu > li.menu-item > .menu-btn,
.tb-primary-menu > li.menu-item > ul.sub-menu > li.menu-item > a.menu-btn {
/* 	background-color: white; */
	background-color: #49B1D6;
	color: white;
	font-size: 17px;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	line-height: unset;	
}

.tb-primary-menu > li > .menu-btn {
	padding: 10px 12px;
}

.tb-primary-menu > li.menu-item > .menu-btn:hover, 
.tb-primary-menu > li.menu-item > ul.sub-menu > li.menu-item > a.menu-btn:hover {
	background-color: var(--color-orange);
	color: white;
}

/* Dropdown Menu Styles */
.sf-menu ul.non-mega-sub-menu ul {
	margin: 0;
}

.sf-menu ul.non-mega-sub-menu {
	padding: 0;
}

.tb-primary-menu li.level-1 ul.sub-menu.non-mega-sub-menu li.menu-item.level-2 a.menu-btn {
	padding: 15px 12px;
}


/* --------------- 2.2.2: Sticky Menu Styles --------------- */

.tb-sticky-header .tb-primary-menu > li {
	height: var(--height-sticky-header);
}

.tb-sticky-header .tb-primary-menu > li > .menu-btn {
	background-color: white;
	color: var(--color-text);
	font-size: 12px;
	padding: 0 12px;
	position: relative;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}

.tb-sticky-header .tb-primary-menu > li > .menu-btn:hover,
.tb-sticky-header .tb-primary-menu > li > .menu-btn:focus {
	background: #fff;
	color: #E83819;
}


/* --------------- 2.2.3: Mobile Menu Styles --------------- */

.tb-nav-trigger .hamburger span {
	background-color: rgba(0, 0, 0, 1);
}

.tb-nav-trigger:hover .hamburger span {
	background-color: white;
}

.tb-mobile-panel {
	background-color: var(--color-liqorice);
}

.tb-mobile-header {
	background-color: var(--color-liqorice);
}

/* =============== 2.3: Footer Styles =============== */

footer.site-footer {
	border-top:1ps solid blue;
	background-color: #D4EDC3;
	padding-top:20px;
}

#bottom .widget-title{font-size:26px;}

footer.site-footer .site-copyright {
	background: var(--color-jet);
	overflow: hidden;
	position: relative;
	color:white;	
}

.site-copyright>.wrap {
    padding: 40px 30px 40px 30px;
}

.site-copyright .tb-social-icons{
/* 	 removes space below smicons in footer */
	margin: 5px 0 5px 0;
}
.site-footer>.wrap {
    padding-top: 0px;
}

footer.site-footer .site-copyright .tb-social-icons > li > a {
	font-size: 2.0rem;
	color: var(--color-turqlt);
}

footer.site-footer .site-copyright .tb-social-icons.dark > li > a:hover {
	color: var(--color-lemon);
}

footer.site-footer a {
	color: var(--color-turqlt);
}

footer.site-footer a:hover {
	color: var(--color-lemon);
}

footer.site-footer .footer-nav a { 
	text-transform: uppercase;
}

footer.site-footer .footer-content h5 {
	color: var(--color-lemon)
}

footer.site-footer .footer-widgets ul li {
	margin: 5px 0;
}



/* =============== 2.4: Heading Styles =============== */

h1, h2, h3, h5,h6 {
	color: var(--color-liqorice);
	font-family: 'Aleo', serif;
	font-weight:400;
	line-height: 1.2;
	margin-top: 10px;
	margin-bottom: 10px;
}


html h1 {
	font-size: 36px;
	}

html h2 {
	font-size: 30px;	
}

html h3 {font-size: 28px;}
h3.content-block  {font-size: 26px;}

html h4 {
	font-family: 'Aleo', serif;
	font-weight:400;
	font-size:28px;
	font-style:italic;
	color:#B53862;
	margin-bottom:5px;
}

h4 small, .h4 small
{
    font-size: 75%;
    color:#be5a7b;
    font-style: italic;
    }

html h5 {
	font-size: 24px;
	/* font-weight:400; */
	/* text-transform: uppercase;	 */
}

html h6 {	
	font-weight:300;
	font-size: 22px;
	/* text-transform: uppercase; */
}

/*
h6.small {	
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	font-weight:normal;
	}
*/

h1 small, .h1 small, 
h2 small, .h2 small, 
h3 small, .h3 small,
/* h4 small, .h4 small, */ 
h5 small, .h5 small, 
h6 small, .h6 small
 {
    font-size: 80%;
    color: var(--color-turqdk);
    font-style: italic; 
    letter-spacing: .5px;   
}


.intro{
	font-size:85%;
	line-height: 1.7;
	font-style:inherit;
	color:DarkRed;
}

.custom-section-padding{padding:10px 20px}

/*
.element-section {
    padding: 20px 0;
    position: relative;
} 
*/

/* FAQ page panel title */
/*
body.page-id-367 .tb-toggle.panel-default > .panel-heading{
	background: #ffecec;
}
body.page-id-367 .tb-toggle.panel-default > .panel-heading:hover{
	background: #ebebeb;
}
*/


div.tb-toggle.panel.panel-default div.panel-heading a.panel-title{
	color: var(--color-text);
    font-family: 'Aleo', serif;
    font-weight:300;
    font-size: 20px;
}
div.tb-toggle.panel.panel-default div.panel-heading a.panel-title:hover{
	color: var(--color-liqorice);
}

/*
.tb-toggle .panel-title {
    border-bottom: 0;
    display: block;
    color: var(--color-turqlt);
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    padding: 10px;
}
*/

/* =============== 2.5: Jumpstart Styles =============== */

/* Reduce padding on pages without custom layouts */
#main {
	padding: 20px 0 30px 0;
}

/* Set background color to white on pages without custom layouts */
.site-inner {
	background: white;
}

/* Reduce padding on sections on custom layouts */
.element-section {
	padding: 40px 30px;
}

body.home .element-section {
	padding: 60px 30px;
}


/* --------------- 2.5.1: Post List Styles --------------- */
.list-wrap .thumb-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	height: 200px;
}

.list-wrap article.has-thumbnail {
	min-height: 100px;
	padding-left: 225px;
	margin-bottom:120px;
}

/* header.entry-header  */h2.entry-title a{
	font-size:26px;
}


/* on single posts, makes categories bigger */
.entry-meta span.category{
	font-size:16px;
	color:rgba(131, 16, 20, 0.7);
}
/* prevents time stamp from showing */
.entry-meta .entry-date{
	display:none;
}


/* --------------- 2.5.2: Post Grid Styles --------------- */

.list-inline {
	padding-left: 0;
	list-style: none;
	margin-left: -5px;
}
.list-unstyled {
	padding-left: 0;
	list-style: none;
}

/* --------------- 2.5.3: Sidebar Styles --------------- */

div.fixed-sidebar.right-sidebar.col-md-4 {
	border-left: 1px dotted var(--color-lemon);
}

.sidebar-dotted {
	border-left: 1px dotted var(--color-lemon);
}

.fixed-sidebar .widget-title{
	font-size:22px;
}

.fixed-sidebar .widget {
	background: white;
	padding: 20px;
}

/* anchor tags in sidebar */
ul#menu-therapy-types.menu li.menu-item.level-1 a {
	font-weight:700;
	color:#B53862;
	}

/* =============== 2.6: Bootstrap Styles =============== */

.btn,button {
	white-space: normal;
}

.btn,.btn-default {
	background-color:white;
	border: 1.25px solid var(--color-orange);
	color: var(--color-orange);
	border-radius: 15px 15px 15px 15px;
	-moz-border-radius: 15px 15px 15px 15px;
	-webkit-border-radius: 15px 15px 15px 15px;
}

.btn:hover,
.btn-default:hover {
	background-color:var(--color-orange);
	border: 1.25px solid var(--color-orange);
	color: white;
	border-radius: 15px 15px 15px 15px;
	-moz-border-radius: 15px 15px 15px 15px;
	-webkit-border-radius: 15px 15px 15px 15px;
}

.btn-lg {
	font-size: 14px;
	padding:10px 20px;
}

.btn-xl {
	font-size:18px;
	padding:15px 20px;
}

.btn-xxl {
	font-size:20px;
	padding:15px 20px;
}

/* =============== 2.7: Blockquote Stylingss =============== */

blockquote {
  display: block;
  border-width: 2px 0;
  border-style: solid;
  border-color: #eee;
  padding: 1.5em 0 0.5em;
  margin: 1.5em 0;
  position: relative;
}
blockquote p {
  font-size:22px;
  color: var( --color-liqorice);
}
blockquote:before {
  content: '\201C';
  position: absolute;
  top: 0em;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 3rem;
  height: 2rem;
  font: 6em/1.08em 'PT Sans', sans-serif;
  color: #666;
  text-align: center;
}
blockquote:after {
  content: "\2013 \2003" attr(cite);
  display: block;
  text-align: right;
  font-size: 0.875em;
  color: #e74c3c;
}



/*  }------ Special divs ------{  */
.special-bgm{
	background-color:#f9f4db;
	padding:12px;
	border:1px solid #8B0000;
	border-radius:5px;
	margin-bottom:15px;
}

/* ------------------- */

address{
	line-height:1.5;
	font-size:105%;
	font-weight:normal;
}

address span.name {
	margin-bottom:15px;
	font-size:120%;
	font-weight:normal;
	color:#B53862;
}
a[href^="mailto"]::before {
    content: "📧 ";
}

a[href^="tel"]::before {
    content: "📞 ";
}

.tb-gforms-compat .gform_wrapper {
    padding: 25px;
    max-width: none;
    width: 100%;
    border: 1px solid silver;
    border-radius: 5px;
    background:#FFFFE0;
}


/* --------------- Simple Testimonial Slider --------------- */

div.testimonial h3 {
	color: var(--color-blue);
/* 	font-family: 'lithos-pro', 'san-serif'; */
	font-size: 1.85rem;
	font-weight: 300;
}

/* Testimonial Plugin */

.strong-view.default .testimonial-inner,
.strong-view.default .testimonial {
    border: 0px solid #FFFFFF;
}


.strong-view.default.slider-container.slider-adaptive:not(.slider-mode-horizontal) .wpmslider-viewport {
	border-top: 0px solid #E6E6E6;
	border-bottom: 0px solid #E6E6E6;
	border-left: 0px solid #E6E6E6;
	border-right: 0px solid #E6E6E6;
}

div.testimonial-inner div.testimonial-content p {
	margin-bottom: 0;
	padding-bottom: 0;
	font-size: 20px;
	font-style: italic;
	font-weight: 100;
	line-height: 150%;
}

.strong-view.default .testimonial {
    margin: 20px auto;
    padding: 0;
    text-align: left;
    /*width: 100%;*/
    border: 0px solid #E6E6E6; 
}

/* ========================= 3: Home Page ========================= */

/* Makes so dropdown is INF RONT of slider at top */
.element-section.has-bg-slideshow>.element {
    position: relative;
    z-index: 1;
}

.homepage-columns h5 a{
/* 	color:#32CD32 */ /* LimeGreen (web colors) */
color:white;
}

.homepage-columns h5 a:hover{
	background:rgba(255, 217, 0, 0.83); /* Gold (web colors) */
	color:#294242; /* DarkSlateGray (web colors) */
	padding:4px;
}


.homebio{
	font-size:18px;
	line-height: 1.5;
	font-style:italic;	
}
p.angelina{
	font-family: 'Aleo', serif;
	font-weight:400;
	font-size:20px;
	font-style:italic;
	color:#B53862;
	margin-bottom:5px;
	
}

/* Gives white opaqe onslider rounded corners */
body.home .element-jumbotron .jumbotron-outer.has-bg, .element-jumbotron_slider .jumbotron-outer.has-bg {
   
    border-radius: 25px;
}

/* ========================= 3.5: Other Stylings ========================= */

.cblock20{
	padding:10px 20px;
	background:#EBEBEC;
	border:1px solid silver;
	border-radius:5px;
}

/* ========================= 4: Media Queries ========================= */

/* =============== 4.1: Phone/Tablet/Laptop Styles =============== */

@media (max-width: 1200px) {
	.header-content .site-logo,
	.header-logo,.header-content .site-logo a {
		float: none;
		margin:0 auto;
	}
	
	header.site-header nav#access{
		float:none;
		margin-top:0;
	}
	
	.tb-primary-menu {
		text-align: center;
	}
	
	.sf-menu > li {
		float: none;
		display: inline-block;
	}
	
}

/* =============== 4.2: Odd Media Query Styles =============== */

/* ----- Styles for less than larger desktops ----- */

@media (max-width: 1300px) {

	/* Making the first hero section shorter */
	body.home section.hero-images {
		min-height: 800px;
	}

	/* Shortening the top padding on the text in the hero image */
	body.home section.hero-images .element.for-25-years {
		padding-top: 3rem;
	}

	/* Making smaller text on "For 25 years block on home page" */
	body.home section.hero-images .element.for-25-years > .tb-content-block {
		font-size: 1.2rem;
		letter-spacing: 1px;
	}

}