/*
Theme Name: Sparkling Child
Theme URI: https://colorlib.com/wp/themes/sparkling
Author: Colorlib
Author URI: http://colorlib.com/
Description: Sparkling is a clean minimal and responsive WordPress theme well suited for travel, health, business, finance, design, art, personal and any other creative websites and blogs. Developed using Bootstrap 3 that makes it mobile and tablets friendly. Theme comes with full-screen slider, social icon integration, author bio, popular posts widget and improved category widget. Sparkling incorporates latest web standards such as HTML5 and CSS3 and is SEO friendly thanks to its clean structure and codebase. It has dozens of Theme Options to change theme layout, colors, fonts, slider settings and much more. Theme is also translation and multilingual ready and is available in Spanish. Sparkling is a free WordPress theme with premium functionality and design.
Version: 2.5.0
Template: sparkling
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sparkling
Domain Path: /languages/
Tags: green, light, white, gray, black, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, photoblogging, left-sidebar, translation-ready, custom-background, custom-colors, custom-menu, featured-images, full-width-template, post-formats, theme-options, threaded-comments


This theme, like WordPress, is licensed under the GPL.

sparkling is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
*/





/*CSS added by Jon Underwood for the Sparkling Child Theme */

#jons_social_icons {
    position: absolute;
    z-index: 100;
  	top: 60px;
  	right: 0px;
  	transition: 600ms;
    -webkit-transition: 600ms;
}
  
#jons_social_icons img {
    width: 60px;
    padding-left: 15px;
}

#jons_social_icons > a > img:hover {
  filter : drop-shadow(0 0 5px #fff);
}



/* tagline is an element created by JON and inserted by JQuery. insert code is bottom of footer.php */
#tagline {
    position: absolute;
    margin: 0 auto;
    width: 80%;
    padding: 65px 0px 0px 180px;   /*top right bottom left*/
    z-index: -99;
    transition: 600ms;
    -webkit-transition: 600ms;
}


/*tagline moves higher up on scroll down, this class get added*/
.tagline_higher {
    padding: 39px 0px 0px 140px !important;     /*top right bottom left*/
}

/*tagline moves higher up on scroll down, this class get added*/
.tagline_highest {
    padding: 12px 0px 0px 140px !important;     /*top right bottom left*/
    width: 257px !important;    
}


/*color behind top level menu iten when hovered over, is a darker green*/
/* this doesnt seem to be part pf sarkilg oprions in wordpress*/
a.dropdown-toggle:hover {
    background-color: #1e9e64 !important;    
}

/*remove unwanted overlays on service area map*/
.i4ewOd-pzNkMb-haAclf {
position: absolute;
left: -100%;
   display: none !important;
   opacity: 0.2;
}



/* for echos by php that Jon adds for debugging purpose only */
.jondebug {
    color: white;
    display: block;
    background-color: black;
    font-size: 1.5em;
	position: absolute;
	z-index: 10000;
}




.cfa-button {
	border: none;
	font-size: 22px;
}

.cfa {
    padding: 0px 0px;
}


#secondary .widget > h3  {     /* title on top of side bar = client feedback */
  	letter-spacing: 1px ;
  	font-size: 1.5em;
    text-transform: none;
}

#text-11 > div > h3  {     /* heading for child cound feedback to match the above */
  	letter-spacing: 1px;
  	font-size: 1.5em;
  	text-transform: none;
    color: #636467;
}
  


@media (max-width:2500px)and (min-width:992px) {  /*setting maximum menu text size on desktop widths....widths smaller than this will make use of vw proportional font sizes */
   .navbar-nav > li > a { font-size: 20px !important;}
   .dropdown-menu>li>a { font-size: 20px !important;}
   #tagline { width: 60% };
}


/* between mobile (hamburger) width and narrow centre section width */
@media (max-width:991px)and (min-width:768px) { 
   .navbar-nav > li > a {
       font-size: 11.5px;  /*was 14.5 */
	   font-size: 1.8vw !important;
   }
	
   .dropdown-menu > li > a {
	  font-size: 11.5px;
  	  font-size: 1.8vw;
  }

}


/* overide bootstrap styling of hamburger bars */
.navbar-toggle .icon-bar+.icon-bar {    /*gap between 3 bars */
    margin-top: 8px;
}

.navbar-default .navbar-toggle .icon-bar {   /*lines*/
    display: block;
    width: 32px;
    height: 5px;
    border-radius: 3px;
    background-color: #ffffff;
}

.navbar-default .navbar-toggle { /*hamburger*/
	margin-top: 19px;
    border-width: 2px;
	border-color: #ffffff;
    border-radius: 10px;
}


/* hide titles of posts - i dont want numbers from the feedback posts, this was for old jason version */
a.post-title {
	display: none;
}



.flex-caption { /*align bottom edge to, 10% of parents height, from parents base */
    width: 100%;
    max-width: none;
    height: 100%;
    bottom: 0; /* overiding flexslider.css */
}

/*text from slider post is styled like this over slider image (featured image) */
.flex-caption .excerpt {
    position: absolute;
    background: rgb(237, 249, 248);
    background: rgba(237, 249, 248, 0.6);
    display: block;
    color: #000;
    width: 28%;
    padding: 12px 20px;
    float: right;
    font-size: 1.6vw;
    right: 5%;
    top: 50%;    /*position 50% from top of parent*/

    -webkit-transform: translateY(-50%); 
        -ms-transform: translateY(-50%);
            transform: translateY(-50%); move inner up 50% of inners height
}



@media (max-width: 767px) {  /* WHEN HAMBURGER IS SEEN */
	/*overiding a display none in flexslider.css line 131   */
	.flex-caption {
	  display: block;
	}
	#area_map {
	  display: none;
	}
	.navbar-default .navbar-nav > li > a {
	  font-size: 1.2em !important;
	  /*menu font to stay this size when hamburger is seen */
	}
	.navbar-nav .open .dropdown-menu > li > a {
	  font-size: 1.2em !important;
	  /*sub menu font to stay this size when hamburger is seen */
	}
	.dropdown-menu > li > a {
	  /*sub menu font on mobile view needs to forced to the correct color */
	  color: #ffffff !important;
	}

	#jons_social_icons {  
	  right: 105px;
	  top: 23px;
	}
}



/* hide rectangles that allow picking of slider image */
.flex-control-paging {
	display: none;
}

i .fa {
	color: #ccc;
	text-size: 40px;
}

/* these classes are originally defined in font-awsome-min.css......They allow i tags to easily insert icons with descriptive tags */
/* I'm modifying to make them less heavy on my slider */
.fa-quote-left:before {
    opacity: 0.5;
}
.fa-quote-right:before {
    opacity: 0.5;
}

/* sidebar text was too light so I've made it same as body text */
#secondary .widget {
	color: #6B6B6B;
}

/* person that gave the quote e.g girl aged 8 */
#text-11 div ul li span {
  color: #636467;
  float: right;
  font-size: 0.9em;
  font-style: oblique;
}


/*hide blogging reply area at bottom of each page */
#comments {
    display: none;
}

/*shadow under active menu item .....the current page */
.navbar-default .navbar-nav > .active > a {
    color: #FFFFFF !important;
    text-shadow: 0 0 3px #096532;
    /* font-size: 1.1em; */
}

.navbar-default .navbar-nav > li > a{
    font-size: 13px;   /* fallback */
    font-size: 2vw;
    line-height: 20px !important;
    /*width: 110px !important;            this is to force submenu items to break over several lines */
}

.navbar-nav .current-menu-ancestor a.dropdown-toggle {    /* overide word red on current selected page*/
    color: #FFFFFF !important;
}

.logo_normal {                 /* when changes happen to logo, they happen over 600ms */
	width: 666px;
	transition: 600ms;
    -webkit-transition: 600ms;
}

.logo_smaller {        /*this class gets added on scrolldown, see footer.php   line??? */
    width: 400px
}

.logo_3lines_smaller {
    width: 200px;
}



/****************MEDIA QUERIES BY JON **********************/

@media (max-width:2000px)and (min-width:1200px) {   /* stops flexcaption getting too big on wide views */
.flex-caption .excerpt {
    width: 367px;
    /*right: -15%;*/
    font-size: 1.35em;
  }
}



/* logo resizing on smallest view, I want to avoid logo tucking under the hamburger */
@media (max-width: 469px) {
	#logo {
  		margin-top: 3px;
    }
	#logo > a > img {
         width: 150px;
    }
    .navbar-default .navbar-toggle { /*humburger*/
	    margin-top: 11px;   /*gap at top of hamburger*/
	}

	.navbar-default .navbar-toggle .icon-bar {   /*lines*/
	    display: block;
	    width: 25px;
	    height: 4px;
	    border-radius: 0px;
	}

	.navbar-default .navbar-toggle { /*humburger*/
	    margin-top: 12px;   /*gap at top of hamburger*/
 	    border-width: 2px;
	}
	#jons_social_icons {  
		display: none;
	}
	
}


/*make footer widget1 go full width */
.col-sm-4.footer-widget {
    width: 100%;
}


h3 {
    line-height: 1.4em;
}

h4{
    margin-top: 18px;
}


/*mobile menu override bootstrap.css to allow drop down more space */
.navbar-fixed-top .navbar-collapse {
    max-height: 440px;
}

/* NOT IN USE  this overlays phone number on right of blue bar
#home_page_phone {
	position: relative;
	font-size: 1.5em;
	color: #FFF;
	z-index: 9999;        
	text-align: right;
    padding-right: 30px;
	padding-top: 20px;
    margin-right: auto;
    margin-left: auto;
}


@media (min-width: 768px) {
   #home_page_phone {
      width: 750px;
   }
}

@media (min-width: 992px) {
   #home_page_phone {
       width: 970px;
   }
}
NOT IN USE */


#footer-area {
 	background-color: inherit;
	color: #6B6B6B;
}

#footer-area a {
	color: #6B6B6B;
}

/* dark bar at the very bottom made same color blue as top*/
#colophon {	
	background-color: #003366
}


#jonscopyrights, #jonscopyrights a {
	color: #e1e9ea !important;
	font-size: 1.2em;
}

#jonscopyright_left {
	float: left;
}

#jonscopyright_right {
	float: right;
}


/* spread some top level menu items over 2 lines for this awkward region of widths */
/*each needs a specific width */
@media (max-width:1199px) and (min-width: 992px) {
  span.caret { display: none };  /*chevron down indicating a drop down is avalible hidden to save width */
  .navbar-nav > li:nth-child(1) > a {width: 4.7em;}
  .navbar-nav > li:nth-child(2) > a {width: 7.3em;}
  .navbar-nav > li:nth-child(3) > a {width: 7.3em;}
  .navbar-nav > li:nth-child(4) > a { width: 8.6em; }
  .navbar-nav > li:nth-child(5) > a { width: 7em; }
  .navbar-nav > li:nth-child(6) > a { width: 6em; }
}

@media (max-width:991px) and (min-width: 768px) {
   .navbar-nav > li > a {
       font-size: 11.5px;  /*was 14.5 */
	   font-size: 2.22vw !important;
	   /*color: yellow !important; testing ipad air2 wdith confusion */
   }
  span.caret { display: none };  /*chevron down indicating a drop down is avalible hidden to save width */
  .navbar-nav > li:nth-child(1) > a {width: 5.6em;}
  .navbar-nav > li:nth-child(2) > a {width: 7.3em;}
  .navbar-nav > li:nth-child(3) > a {width: 7.4em;}
  .navbar-nav > li:nth-child(4) > a { width: 8.6em; }
  .navbar-nav > li:nth-child(5) > a { width: 6.2em; }
  .navbar-nav > li:nth-child(6) > a { width: 5.8em; }
}

@media (max-width:1000px) and (min-width: 830px) {
   .navbar-nav > li > a {
       font-size: 11.5px;  /*was 14.5 */
	   font-size: 1.99vw !important;
   }
}



/*STRANGE REGION OF WIDTHS WERE THE MAP IS SMALL*/
/*HIDE MAP SO THAT TOOLTIPS ARE NOT MISALIGNED*/
@media (max-width:1199px) and (min-width: 992px) {
  #area_map {
     display: none;
  }

}


@media (max-width:992px) and (min-width: 100px) {
	#jonscopyright_left , #jonscopyright_right {
		float: none;
		text-align: center;
	}
}

/* override ultimate shortcodes to makebuttons simpler */
.su-button-style-default {
    border-width: 0px;
    border-style: none !important;    
}
.su-button-style-default span {
    border-style: none !important;
    font-size: 18px;
}



/* remove border over greeen band at botton of footer*/
#colophon {
    border-top: none;
}


/*
.container.nav-bar {
    width: 100%;
}

@media (min-width: 768px)  {
    .container {
      width: 100%; /* overide bootstrap */
    }
}
*/