/*
 Theme Name: SpaSalon Child Theme
 Theme URI: https://spasalon.com
 Author: IBCS, Inc.
 Author URI: https://spasalon.com
 Template: twentyseventeen
 Description: Child theme for SpaSalon sites
 Version: 0.1
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags:
 Text Domain: spasalon-child
*/
	
/********************************/
/* DO NOT EDIT BELOW THIS LINE! */
/********************************/
/* Hide title on ALL pages until I can think of a way */
/* to do the main page differently */

/* Section for background color */
/* These options set through theme options screen */
body, .spasalon-logo, .site-header {
  background: #ffffff;
}
/* Section for header/footer background color */
/* Includes a line for the background of mobile menu */
.navigation-top, .site-footer, .main-navigation ul {
  background-color: #ffffff;
}
/* Section for content background color */
.panel-content, .site-content, .site-content-contain {
  background-color: #ffffff;
}

/* Remove text decoration that wordpress adds to some heading sections */
p, h1, h2, h3, h4, h5, h6 {
  text-transform: none;
  padding-top: 0;
}
p {
  margin-bottom: 1em;
}
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.25em;
}
/* Adjust the font-weight for label areas to make contact forms match rest of site */
label {
  font-weight: 700;
}

/* Remove the title section as we don't want to use it anymore */
.type-page .entry-header,
.type-page .entry-title {
  display: none;
}

body:not(.twentyseventeen-front-page) .entry-header {
  padding-top: 30px;
}

.author .page-header, 
.category .page-header, 
.search-results .page-header {
  padding-top: 30px;
}

/* Take spacing out from the menu */
.navigation-top .wrap {
  padding-top: 0;
  padding-bottom: 0;
}

/* Remove gaps before and after content */
.site-content, .site-content-contain, .entry-content {
  padding-top: 13px !important;
}
@media screen and (max-width: 800px) {
  .site-content, .site-content-contain, .entry-content {
    padding-top: 7px !important;
  }  
}

.page:not(.home) #content {
  padding-bottom: 10px;
}

/* Remove gaps after title on non-blog pages */
.page.page-one-column .entry-header,
.twentyseventeen-front-page.page-one-column .entry-header,
.archive.page-one-column:not(.has-sidebar) .page-header {
  margin-bottom: 0.5em;
}

/* Adjust display in the site footer */

/* Spacing for SpaSalon Theme Logo */
.spasalon-logo {
  padding-top: 0px;
  padding-bottom: 0px;
}

/* Section to style our custom header content to the right */
#spasalon_child_custom_header .right_wrap {
  width: 300px;
  float: right;
  text-align: right;
}

/* Section to allow header background to bleed through */
.main-navigation ul, #spasalon_child_custom_header {
  background-color: transparent;
  background-image: none;
}

/* Div for FullScreen ShortCode */
.full-screen {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Div's for Column ShortCodes */
div.column_last { margin-right: 0 !important; }
.one_half, .one_third, .two_thirds, .one_fourth, .three_fourths, 
.one_fifth, .two_fifths, .three_fifths, .four_fifths, 
.one_sixth, .five_sixths, .one_seventh, .two_sevenths, .three_sevenths, 
.four_sevenths, .five_sevenths, .six_sevenths, 
.one_eighth, .three_eighths, .five_eighths, .seven_eighths {
  float: left;
  margin-right: 4%;
  margin-bottom: 5px;
}

div.one_half    { width: 48%; }
div.one_third   { width: 30.66%; }
div.two_thirds  { width: 65%; }
div.one_fourth  { width: 22%; }
div.three_fourths  { width: 74%; }
div.one_fifth { width: 16.8%; }
div.two_fifths { width: 37.6%; }
div.three_fifths { width: 58.4%; }
div.four_fifths { width: 79.2%; }
div.one_sixth { width: 13.33%; }
div.five_sixth { width: 82.66%; }
div.one_seventh { width: 10.85%; }
div.two_sevenths { width: 25.71%; }
div.three_sevenths { width: 40.57%; }
div.four_sevenths { width: 55.42%; }
div.five_sevenths { width: 70.28%; }
div.six_sevenths { width: 85.14%; }
div.one_eighth { width: 9%; }
div.three_eighths { width: 35% }
div.five_eighths { width: 61% }
div.seven_eighths { width: 87% }

div.margin_one_percent { 
	width: 98%;
	margin-left: 1%;
	margin-right: 1%	
}
div.margin_two_percent { 
	width: 96%;
	margin-left: 2%;
	margin-right: 2%	
}
div.margin_three_percent { 
	width: 94%;
	margin-left: 3%;
	margin-right: 3%	
}
div.margin_four_percent { 
	width: 92%;
	margin-left: 4%;
	margin-right: 4%	
}
div.margin_five_percent { 
	width: 90%;
	margin-left: 5%;
	margin-right: 5%	
}
div.margin_six_percent { 
	width: 88%;
	margin-left: 6%;
	margin-right: 6%	
}
div.margin_seven_percent { 
	width: 86%;
	margin-left: 7%;
	margin-right: 7%	
}
div.margin_eight_percent { 
	width: 84%;
	margin-left: 8%;
	margin-right: 8%	
}
div.margin_nine_percent { 
	width: 82%;
	margin-left: 9%;
	margin-right: 9%	
}
div.margin_ten_percent { 
	width: 80%;
	margin-left: 10%;
	margin-right: 10%	
}
div.margin_eleven_percent { 
	width: 78%;
	margin-left: 11%;
	margin-right: 11%	
}
div.margin_twelve_percent { 
	width: 76%;
	margin-left: 12%;
	margin-right: 12%	
}
div.margin_thirteen_percent { 
	width: 74%;
	margin-left: 13%;
	margin-right: 13%	
}

div.content_line { clear: both; }

/* Stack the div's on smaller screens */
@media screen and (max-width: 800px) {
  div.column_last { margin-right: 0 !important; }
  .one_half, .one_third, .two_thirds, .one_fourth, .three_fourths, 
  .one_fifth, .two_fifths, .three_fifths, .four_fifths, 
  .one_sixth, .five_sixths, 
  .one_seventh, .two_sevenths, .three_sevenths, .four_sevenths, .five_sevenths, .six_sevenths, 
  .one_eighth, .three_eighths, .five_eighths, .seven_eighths,
  .margin_one_percent, .margin_two_percent, .margin_three_percent, .margin_four_percent, 
  .margin_five_percent, .margin_six_percent, .margin_seven_percent, .margin_eight_percent, 
  .margin_nine_percent, .margin_ten_percent, .margin_eleven_percent, .margin_twelve_percent, 
  .margin_thirteen_percent {  
    float: left;
    margin-right: 0;
    margin-bottom: 5px;
  }  
  div.one_half    { width: 100%; }
  div.one_third   { width: 100%; }
  div.two_thirds  { width: 100%; }
  div.one_fourth  { width: 100%; }
  div.three_fourths  { width: 100%; }
  div.one_fifth { width: 100%; }
  div.two_fifths { width: 100%; }
  div.three_fifths { width: 100%; }
  div.four_fifths { width: 100%; }
  div.one_sixth { width: 100%; }
  div.five_sixths { width: 100%; }  
  div.one_seventh { width: 100%; }
  div.two_sevenths { width: 100%; }
  div.three_sevenths { width: 100%; }
  div.four_sevenths { width: 100%; }
  div.five_sevenths { width: 100%; }
  div.six_sevenths { width: 100%; }
  div.one_eighth { width: 100%; }
  div.three_eighths { width: 100%; }
  div.five_eighths { width: 100%; }
  div.seven_eighths { width: 100%; }  
  div.margin_one_percent { 
  	width: 100%; 
  	margin-left: 0%;
  	margin-right: 0%
  }
  div.margin_two_percent { 
  	width: 100%;
  	margin-left: 0%;
  	margin-right: 0%
  }
  div.margin_three_percent { 
  	width: 100%;
  	margin-left: 0%;
  	margin-right: 0%
  }
  div.margin_four_percent { 
  	width: 100%;
  	margin-left: 0%;
  	margin-right: 0%
  }
  div.margin_five_percent { 
  	width: 100%;
  	margin-left: 0%;
  	margin-right: 0%
  }
  div.margin_six_percent { 
  	width: 100%;
  	margin-left: 0%;
  	margin-right: 0%
  }
  div.margin_seven_percent { 
  	width: 100%;
  	margin-left: 0%;
  	margin-right: 0%
  }
  div.margin_eight_percent { 
  	width: 100%;
  	margin-left: 0%;
  	margin-right: 0%
  }
  div.margin_nine_percent { 
  	width: 100%;
  	margin-left: 0%;
  	margin-right: 0%
  }
  div.margin_ten_percent { 
  	width: 100%;
  	margin-left: 0%;
  	margin-right: 0%
  }
  div.margin_eleven_percent { 
  	width: 100%;
  	margin-left: 0%;
  	margin-right: 0%
  }
  div.margin_twelve_percent { 
  	width: 100%;
  	margin-left: 0%;
  	margin-right: 0%
  }
  div.margin_thirteen_percent { 
  	width: 100%;
  	margin-left: 0%;
  	margin-right: 0%
  }
}

/* Fix the home page's menu positioning with .navigation-top */
/* and the rest of the pages with .customer-header */
/* which is required due to bad coding in the theme */
/* which puts the margin-bottom: 70px; in-line */
.navigation-top {
  position: relative;
}
.custom-header {
  margin-bottom: 0px !important;
}

/* Remove white space above and below mobile menu */
.menu-toggle {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* Remove lines from mobile menu */
.main-navigation li {
  border-width: 0px;
}
.main-navigation > div > ul {
  border-width: 0px;
}

/* Remove white space between sections (before/after menu, before footer) */
.navigation-top, .site-footer {
  border-width: 0px;
}
.site-footer {
  margin-top: 5px;
}
.site-footer .widget-area, .site-footer .wrap {
  padding-top: 5px;
  padding-bottom: 5px;
}  
.widget {
  padding-bottom: 5px;
}

/* Remove white space after the featured image */
.single-featured-image-header
 {
  border-width: 0px;  
}

/* No bottom border in tables */
tr {
    border-bottom: 0;
}

/* Remove gaps before and after home page content */
.panel-content .wrap {
  padding-bottom: 1px;
  padding-top: 1px;
}

/* Add extra space */
.twentyseventeen-front-page .site-content {
  padding: 10px;
}

/* Force copyright to another line */
.social-navigation + .site-info {
  clear: both;
  margin-left: 0;
}
	
/* Force the home page content to center floating under the menu options */
@media screen and (max-width: 1000px) {
   .page-one-column .panel-content .wrap, .site-content .wrap, .entry-header, .entry-content, 
   .single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) .page-header, .archive.page-one-column:not(.has-sidebar) #primary {
      width: 98%;
      max-width: 98%;
   }   
}   
@media screen and (min-width: 1001px) {
   .page-one-column .panel-content .wrap, .site-content .wrap, .entry-header, .entry-content, 
   .single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) .page-header, .archive.page-one-column:not(.has-sidebar) #primary {
      width: 900px;
      max-width: 900px;
   }   
}
.panel-content .wrap, .site-content .wrap {
  padding-left: 0;
  padding-right: 0;
}

/* Don't use Featured Images on the pages themselves */
.single-featured-image-header { display: none !important; }

/* Container for Page that shrinks for phones */
div.site {
	width: 980px;
	margin: 0 auto;
	position: relative;
}
@media only screen and (max-width: 1032px) {
   div.site {
	width: 95%;
	margin: 0 auto;
	position: relative;
   }
}

/* Remove float from images on small screens */
@media screen and (max-width: 480px) {
	img.alignleft {
	 	display: block;
	        float: none;
	        margin: 0 0 20px 0;
	}

	img.alignright {
	 	display: block;
	        float: none;
	        margin: 0 0 20px 0;
	}
}