/*

 Theme Name:   WestSide Baby 2019

 Description:  WestSide Baby customization of the Total theme

 Author:       Dash Buck

 Author URI:   https://dashbuck.com

 Template:     total

 Text Domain:  dxbwsb

 Version: 20200828

*/



@import url('https://fonts.googleapis.com/css?family=PT+Serif|Pontano+Sans&display=swap&subset=latin-ext');



html body { 

	font-size: 18px; /*Control rem size*/

	font-family: 'Pontano Sans', sans-serif;

	color: #000;

}



div#ht-page h1, div#ht-page h2, div#ht-page h3, div#ht-page h4, div#ht-page h5, div#ht-page h6, div#ht-page h7 {

	font-family: 'PT Serif', 'Pontano Sans', serif;

	color: #000;

	text-transform: none;

	letter-spacing: initial;

}



a {

	text-decoration:underline;

	font-weight: bold;

}

/* header */

@media (min-width: 10em) {

	#ht-masthead > .ht-container {
		position: relative;
	}

	#ht-site-branding {
		float: left;
		width: 30%;
		padding: 15px 0;
		transition: padding 0.3s ease;
		-moz-transition: padding 0.3s ease;
		-webkit-transition: padding 0.3s ease;
	}

	#ht-site-branding img {
		max-height: 60px;
		width: auto;
	}

	#ht-site-navigation {
		float: right;
		width: 70%;
		padding: 27px 0;
		transition: padding 0.3s ease;
		-moz-transition: padding 0.3s ease;
		-webkit-transition: padding 0.3s ease;
	}

	.ht-main-navigation .ht-menu {
		float: right;
	}

	@media (max-width: 1000px){
		#ht-site-branding {
			width: 75%;
		}

		#ht-site-branding img {
			max-height: 80px;
		}

		#ht-site-navigation {
			width: 25%;
		}
	}

	@media (max-width: 31.25em){
		#ht-site-navigation {
			padding: 4vw 0;
		}
	}
}



/* main menu */

.ht-main-navigation li {

	margin-left: 0;	

}



.ht-main-navigation a {

	font-family: 'Oswald', sans-serif;

    font-size: 18px;

    text-transform: none;

    font-weight: 600;

}



.ht-main-navigation ul ul a {

	padding: 7px 15px;
	font-size: 14px !important;
	font-weight: 400 !important;
	font-family: 'Oswald', sans-serif;

}



/*Buttons*/



.ht-cta-buttons a, div.wp-block-button a.wp-block-button__link {

	font-family: 'Pontano Sans', sans-serif;

	font-size: 1.3rem;

	text-decoration: none;

	font-weight: normal;

}



/*Main button & alt hover - copied from theme but switched to rem for size control*/

div.wp-block-button a.wp-block-button__link {

	background: #659b3f;

	color: #FFF;

	padding: 0 1.75rem;

	line-height: 3rem;

	border-radius: 1px;

	margin: 0 0.2rem;

}



.ht-cta-buttons a.ht-cta-button1 {

	background: #659b3f;

	color: #FFF;

	padding: 0 1.75rem;

	line-height: 3rem;

	border-radius: 1px;

}



.ht-cta-buttons a.ht-cta-button2 {

	line-height: 3rem;

	border-radius: 1px;

	padding: 0 1.75rem;

}



/*Alt button & main hover*/

.ht-cta-buttons a.ht-cta-button1:hover, .ht-cta-buttons a.ht-cta-button2, div.wp-block-button a.wp-block-button__link:hover, div.wp-block-button a.wp-block-button__link:focus { 

	background: #000;

	color: #FFF;

}

	

/*Top Bar widget area*/

#top-bar { background-color: #659b3f; color: #FFF; text-align: center;}

#top-bar a { color: #FFF; text-decoration: underline; }

#top-bar p { margin: 0; padding:0.5rem 1rem; }

#ht-masthead { border: none;}



/*Mobile menu bar*/

@media screen and (max-width: 1000px) {

	.toggle-bar { /*Copied entire command set and changed pieces needed*/

	display: block;

	position: relative;

	top: initial;

	right: initial;

	height: 3rem;

	width: 3rem;

    background: #FFC107;

    cursor: pointer;

    float: right;

	}

	

	div.toggle-bar:after { /*Triple lines icon*/

	content:'';

    position: absolute;

    top: inital;

	top: 46.6%;

    margin-top: 0;

    height: 4px;

    left: 8px;

    right: 8px;

    background: #FFF;

    box-shadow: 0 10px 0 0 #FFF, 0 -10px 0 0 #FFF;

	}



	.toggle-bar {

		display: block;

		height: 50px;

		width: 50px;

		background: #FFC107;

		cursor: pointer;

		position: relative;

		float: right;

	}

}



/*Page Title*/



.ht-main-header { 

	padding: 1rem; 

	background-color: RGBA(101, 155, 63, .3); 

}



.ht-main-header .ht-main-title {

	margin: 1rem 0;

}



.ht-main-header .breadcrumbs {

	display: none;	

}



/* headings */



h1, h2, h3, h4, h5, h6 {

	margin-top: 1em;	

}



h1 strong, h2 strong, h3 strong, h4 strong {

	font-weight: normal;

}



h2 {

	font-size: 32px;	

}



/*other content */



div#ht-page .wp-block-cover.has-background-dim h1, div#ht-page .wp-block-cover.has-background-dim h2, div#ht-page .wp-block-cover.has-background-dim h3, div#ht-page .wp-block-cover.has-background-dim h4 {

	color: white;	

}



.wp-block-quote.is-large p, .wp-block-quote.is-style-large p {

    text-align: center;

    margin: 1em 10%;

}



.has-normal-font-size, .has-regular-font-size {

    font-size: 18px;

}





hr, hr.wp-block-separator {

    background-color: #000;

    border: 0;

    height: 1px;

    margin: 30px 0;

}



.wp-block-button {

	margin-bottom: 15px;	

}



/*

#donate-container {

  overflow: hidden;

  // Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 0.5625) 

  padding-top: 137%;

  min-height: 1600px;

  position: relative;

}

 

#donate-container iframe#etapIframe {

   border: 0;

   height: 100%;

   left: 0;

   position: absolute;

   top: 0;

   width: 100%;

}*/

	

/*Home Page*/

	/*CTA section*/

	

	/*Parallax & size fixes*/

	#ht-cta-section { background-attachment: unset;}

	#ht-cta-section .ht-section { padding: 130px 0; }

	

	@media screen and (min-width: 1600px){

		#ht-cta-section .ht-section { padding: 200px 0; }

	}

	

	/*Override new header color so there's enough contrast for image. TODO: Add color options to allow client to tweak contrast for new images?*/

	#ht-cta-section .ht-section-title-tagline .ht-section-title { color: #fff; }



	/*Counter section*/

	

		/*Sizing fixes for text wrap*/

	.ht-counter { 

		padding: 0 .75rem .75rem; 

	}   



	.ht-counter-count.odometer { 

		font-size: 2.45rem; 

		margin-bottom: 1rem;

	}



	h6.ht-counter-title {

		font-size: 1.3rem;

		line-height: 1.6rem;

		min-height: 3.2rem;

	}





@media screen and (max-width: 1150px) and (min-width: 768px){



	.ht-counter { 

		padding: 0 .25rem .5rem; 

	}   



	.ht-counter-count.odometer { 

		font-size: 1.6rem;

		margin-bottom: .5rem; 

	}



	h6.ht-counter-title {

		font-size: 1rem;

		line-height: 1.2rem;

		min-height: 2.4rem;

	}



}



/*Widget area to add Instagram to bottom of Home page*/

	.pre-footer .ht-section-title { width: 100%; }



/* footer */

.ht-top-footer {
	color: #BBB;
}

.ht-footer {
	float: left;
	margin: 3rem 0;
}

#ht-colophon::before {
	display: none;
	z-index: -1;
}

#ht-colophon .widget-title {
	text-transform: none;
	letter-spacing: 1px;
	color: #BBB;
	margin-bottom: 15px;
}

@media (min-width: 37.5em) and (max-width: 56.25em){
	.ht-footer {
		width: 50% !important;
		margin: 2rem 0;
	}
}

@media (max-width: 37.5em){
	.ht-footer {
		margin: 1.5rem 0;
	}
}