@charset "utf-8";

/* 
Whole Step classes - 2021 refresh
© 2021+ Whole Step CIC
------------------------------------------------------------------------------------------*/


/* fonts
------------------------------------------------------------------------------------------*/
	@import url( "/css/fntPoppins.css" );
	* { font-weight: normal; }
	body
		{ font-family: 'poppins', Arial, sans-serif; }
	.thin, h3
		{ font-family: 'poppinsThin', Arial, sans-serif; font-weight: normal; }
	.light, .quotes, h5, #phoneEmail span, #snailmail, nav#sub
		{ font-family: 'poppinsLight', Arial, sans-serif; font-weight: normal; }
	.medium, h2, h4, figcaption, .contact, .quotes p::first-letter, #tariff h3
		{ font-family: 'poppinsSemibold', Arial, sans-serif; font-weight: normal; }
	.bold, strong, #btnDonate, #phoneEmail
		{ font-family: 'poppinsBold', Arial, sans-serif; font-weight: normal; }
	.heavy
		{ font-family: 'poppinsBlack', Arial, sans-serif; font-weight: normal; } 


/* globals
------------------------------------------------------------------------------------------*/
	body { padding: 10px 20px 0 20px; position: relative; }
	
	h1 { margin: 0; margin-top: -8px; }
	h2 { clear: both; font-size: 3em; }
	h3 { font-size: 2.8em; margin: 0 0 1ex 0; border-bottom: 1px solid #888; }
	h4 { font-size: 1.8em; margin: 1ex 0; line-height: 1.2; }
	h5 { font-size: 1em; margin-top: 0; }
	p, ul { margin: 0 0 1em 0; letter-spacing: 0.2ex; line-height: 1.6; }
	p + ul { margin-top: -1em; }
	hr { width: 30%; }
	
	a { text-decoration: none; border-bottom: 1px dotted #01b1ed; }
	a:hover { border-bottom-style: solid; }
	
	figure { margin: 0; padding: 0; }
	address { font-style: normal; }


/* colours
------------------------------------------------------------------------------------------*/
	/* text */
	body, p, a { color: #333; }
	.wsGreen { color: #82a739; }
	.wsBlueL { color: #01b1ed; }
	.wsBlueM, h5 { color: #027aca; }
	footer, footer p, footer a { color: white; }
	hr { color: #888; }
	
	/* backgrounds */
	footer, nav#sub a { background: #01b1ed; }
	.bgPale { background: #f1fbfd; }


/* template
------------------------------------------------------------------------------------------*/
	/* header */
	h1 { float: left; margin-left: -10px; }
	header #social { float: right; }
	#menu { position: absolute; z-index: 10; top: 20px; right: 20px; }
	
	nav#top { clear: right; float: right; margin-top: 1em; letter-spacing: 0; }
	nav#top li { position: relative; display: inline; }
	nav#top a { margin-left: 1em; text-decoration: none; }
	
	nav#top li ul { display: none; position: absolute; top: 1em; left: 0; background: white; padding: 10px 1em 1ex 0; }
	nav#top li li { display: block; width: 100%; }
	nav#top li li a { white-space: nowrap; }

	#hamburger, #mnuClose { position: absolute; top: 10px; right: 10px; cursor: pointer; }
	#hamburger { display: none; }

	#menuNS { display: none; position: absolute; z-index: 10; background: white; top: 0; bottom: 0; left: 0; right: 0; }
	nav#topNS { padding-top: 2em; }
	nav#topNS a { display: block; margin: 1em 20px; font-size: 1.2em; }
	nav#topNS a:first-child { margin-top: 40px; } 
	nav#topNS ul { list-style-type: none; margin: 0; padding: 0; }
	nav#topNS li { position: relative; }
	.subOpen, .subClose { position: absolute; top: -10px; right: 10px; z-index: 10; cursor: pointer; 
		padding: 5px; background: #ddd; }
	.subClose { display: none; }
	nav#topNS li ul { display: none; }

	#social img { vertical-align: middle; margin-left: 1em; }
	#social a:last-child img { margin-right: -10px; }
	#socialNS a { display: inline-block; margin: 1em 1ex; }
	#socialNS a:nth-child(1) { margin-left: 20px; } 
	
	/* h2 */
	h2.banner, footer { margin: 1em -30px; padding: 2em 30px; } 
	h2.banner { color: white; background-size: 100% auto; text-shadow: 1px 1px #333; background-position: center; }
	h2.banner.inverse { color: black; text-shadow: 1px 1px #ccc; } 
	footer { margin-bottom: -30px; }

	/* sign-up box */
	#signUp { position: relative; width: 24em; margin: auto; margin-bottom: 2em; background: black; padding: 20px 40px; border-radius: 40px } 
	#signUp, #signUp p { color: white; }
	#signUp h3 { margin-top: 0; }
	#signUp img { margin-right: 0 }

	#mcShow { cursor: pointer; }
	#mc_embed_signup { display: none; position: absolute; top: -20px; left: -10px; z-index: 20; width: 450px; height: 100%; 
		padding: 30px 20px; color: white; background: black; box-shadow: 2px 2px 4px #ddd; border-radius: 24px; }
	#mcBtnClose, #privBtnClose { position: absolute; top: 12px; right: 12px; z-index: 20; cursor: pointer; }
	#privBtnClose { z-index: 40; }
	#mc_embed_signup form { }
	#mc_embed_signup .mc-field-group { min-height: 2em; }
	#mc_embed_signup .mc-field-group label { display: inline-block; width: 180px; }
	#mc_embed_signup .mc-field-group input { display: inline-block; width: 200px; }
	#mc_embed_signup .asterisk { color: yellow; }
	.indicates-required { display: inline;  
		font-family: 'poppinsLight', Arial, sans-serif; font-weight: normal; font-size: 0.8em; }
	#mc_embed_signup .button { margin-left: 183px; 
		font-family: 'poppinsLight', Arial, sans-serif; font-weight: normal; font-size: 1.2em; }
	
	#privacy { position: absolute; top: -20px; right: -20px; width: 360px; z-index: 30; 
		background: black; padding: 20px 40px; border: 1px solid white; border-radius: 20px;
		box-shadow: 2px 2px 4px #ddd; font-size: 90%; line-height: 1.2em; }
	#privacy a { color: white; }

	/* footer */
	footer h3 { padding-top: 1em; }
	#phoneEmail { width: 40%; float: left; }
	#phoneEmail span, #contBlock span { display: inline-block; width: 4em; }
	#snailmail { width: 25%; float: left; }
	#credits { width: 30%; float: right; text-align: right; font-size: 80%; } 
	
	/* variable harvest */
	#farm { display: none; }


/* page-specific
------------------------------------------------------------------------------------------*/
	/* h2 banners */
	#pgHome h2 { background-image: url( "/img/banner/colourGuitars.jpg" ); }
	#pgMTChild h2 { background-image: url( "/img/banner/childInstruments.jpg" ); }
	#pgMTAdult h2 { background-image: url( "/img/banner/drumsClose.jpg" ); }
	#pgMindful h2 { background-image: url( "/img/banner/mindfulMusic.png" ); }
	#pgCommu h2 { background-image: url( "/img/banner/ukeAndBongo.jpg" ); }
	#pgAttach h2 { background-image: url( "/img/banner/handsPianoAdultChild.jpg" ); }
	#pgIRP h2 { background-image: url( "/img/banner/blueUke.jpg" ); }
	#pgRWS h2 { background-image: url( "/img/banner/handWriting.jpg" ); }
	#pgCosts h2 { background-image: url( "/img/banner/therapistWithClient.jpg" ); }

	#pgAbout h2 { background-image: url( "/img/banner/maracas.jpg" ); }
	#pgImpact h2 { background-image: url( "/img/banner/paintedPiano.jpg" ); }
	#pgPartners h2 { background-image: url( "/img/banner/handshake.jpg" ); }
	#pgTestimonials h2 { background-image: url( "/img/banner/woodenBlocks.jpg" ); }
	#pgContact h2 { background-image: url( "/img/banner/hello.jpg" ); }

	/* services inter-page links */
	nav#sub { clear: both; font-size: 1.2em; }
	nav#sub .fwd { float: right; }
	nav#sub .back { float: left; }
	nav#sub a { margin-top: 1em; color: white; padding: 8px 24px; border-radius: 24px; }
	
	/* comm. mus. page */
	#pgCommu section { max-width: 1400px; margin: auto; }

	/* mindful M page */
	#carouselOuter { position: relative; }
	#carouselInner { margin: 0 0; background: #c0c0c0; }
	.slick-slide img { margin-right: 10px; }
	#goL, #goR { position: absolute; z-index: 120; top: 80px; cursor: pointer; }
	#goL { left: 0; }
	#goR { right: 0; }
	#pgMindful figcaption { position: absolute; padding: 2px 10px; bottom: 1em; z-index: 110; 
		text-shadow: 1px 1px white; background: rgba( 255, 255, 255, 0.4 ); }
	
	/* Research, workshops & super page ~ level paras (see too JS) */
	.rws + h4 { margin-top: 2em; }
	
	/* costs page headers */
	#tariff h4 { min-height: 2.6em; border-bottom: 1px solid black; }  
	#tariff h3 { font-size: 1.2em; border: none; }
	
	/* FAQs */
	#faqs h4, #faqs div a { cursor: pointer; }
	#faqs h4 { margin-top: 0; margin-bottom: 1.6em; clear: both; float: left; width: 30%; font-size: 1.3em; }
	#faqs div { float: right; width: 60%; margin-bottom: 1em; }
	#faqs div a { display: block; vertical-align: text-bottom; border: none; }
	#faqs div div { display: none; width: 100%;  border-bottom: 1px solid silver; }
	#faqs p { max-width: 36em; }
	
	/* impact page */
	#pgImpact h3+h4 { margin-top: 0; }
	#pgImpact section { margin: auto; max-width: 1400px; }
	
	/* supporters page */
	#pgPartners #signUp { float: left; }
	#supporters h4 { padding-top: 1em; border-top: 1px solid gray; }
	#supporters img { margin: auto; display: block; }
	#appeal { float: right; margin-bottom: 2em; max-width: 36em; padding: 20px 40px; border-radius: 40px; 
		background: url( '/img/photo/z3-piggy.jpg' ) center bottom; }
	#appeal h3, #appeal p { text-align: center; color: white; text-shadow: 1px 1px black; 
		background: rgba( 0, 0, 0, 0.5 ); }
	#appeal h3 { border: none; }
	#appeal p:last-child { background: none; }
	
	/* testimonial quotes */
	.quotes { font-size: 1.2em; }
	.quotes p::first-letter { font-size: 1.8em; line-height: 0.85; }
	.quotes p { max-width: 36em; break-inside: avoid; }


/* open
------------------------------------------------------------------------------------------*/
	.txtL, .txtR { width: 32%; }
	.objL, .objR { width: 55%; }
	.tileL, .tileM, .tileR { width: 45%; }
	.txtL h4, .txtR h4, .objL h4, .objR h4, .tileL h4, .tileM h4, .tileR h4 { margin-top: 0; }
	.objL img, .objR img, .tileL img, .tileM img, .tileR img { max-width: 100%; }
	.objR img { float: right; }
	.tileL img, .tileR img { margin-bottom: 2em; }
	.tileL h4 { text-align: right; }
	.tileM { margin: auto; }
	.tileM h4 { text-align: center; }
	

	.txtL, .objL, .tileL { float: left; margin-right: 5%; }
	.txtR, .objR, .tileR { float: right; margin-left: 5%; }
	
	.threeBox div { float: left; width: 30%; margin-right: 5%; }
	.threeBox div:nth-child( 3 ) { margin-right: 0; }
	.twoBoxThree div { float: left; width: 30%; margin-left: 15%; margin-right: 10%; }
	.twoBoxThree div:nth-child(2) { margin-left: 0; margin-right: 15%; }
	.threeBox img, .twoBoxThree img { max-width: 100%; }

	
	iframe.yt { width: 560px; height: 315px; max-width: 100%; }
	.tileL iframe.yt { float: right; }
	
	.spacer { clear: both; padding: 2em 0; }
	.newsp { column-count: 2; column-gap: 3em; }
	
	.wsBtn { margin-top: 1em; width: 116px; height: 32px; }
	
	
/* adaptive
------------------------------------------------------------------------------------------*/
	@media( max-width: 1000px ) {
		/* template */
		#menu { display: none; }
		#hamburger { display: block; }
		#tariff h4 { min-height: 0; }
		
		/* open */
		.txtL, .txtR, .objL, .objR, .tileL, .tileR { float: none; margin: 0 0 1ex 0; width: 95%; }
		.objL, .objR { width: 100%; }
		.objL *, .objR * { float: none; }
		.tileM h4, .tileL h4, .tileL .right, .objR figcaption { text-align: left; }
		.tileM { margin: 0; width: 95%; text-align: left; }
		
		.spacer { padding: 0; }
	}
	
	@media( max-width: 750px ) {
		/* page-specific */
		.rws + h4 { margin-top: 0; }
					
		/* open */
		.threeBox div, .twoBoxThree div { float: none; width: 95%; margin: 0 0 2em 0; }
	}
	
	
	@media( max-width: 640px ) {
		/* global */
		p { letter-spacing: 0; line-height: 1.2; }
		.mid { text-align: left; }
	
		/* template */
		h1 { margin-right: 50px; }
		h1 img { max-width: 100%; }
		h2.banner, h3 { font-size: 10vw; }
		h2.banner { padding: 1em 30px; }
		h2.banner.s240 { font-size: 7vw; }
		
		#mc_embed_signup, #privacy { border-radius: 0; box-shadow: none; } 
		#mc_embed_signup { width: 100%; position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
		#mcBtnClose { right: 52px; }
		#mc_embed_signup .button { margin-top: 1em; margin-left: 0; }
		#privacy { top: 10px; left: 10px; width: 60%; }
		
		#signUp { width: 100%; margin: 1em -30px; padding: 2em 30px; border-radius: 0; }
		#phoneEmail, #snailmail, #credits { float: none; width: 100%; }
		#credits { text-align: left; }
		
		/* page-specific */
		#faqs h4, #faqs div { float: none; width: 95%; }
		#faqs h4 { margin-bottom: 1ex; }
		#faqs div { margin-bottom: 1.6em; }
		#pgTestimonials video { width: 100%; }
		
		/* open */
		.newsp { column-count: 1; }
		footer div { float: none; margin: 0; width: 90%; }
	}