/* Snowcastle Valley version 2.0.1 - 2020-04-23 */


/* -------- FONTS -------- */

/* 	set the base font size so that 1 rem (probably) equals 10px: 62.5% of 16 = 10 */
/* this is a design default: every size has this reset in queries.css */
html	{ font-size: 62.5%; }	

/* 	set the core font sizes for the site based on the "offical" sizes
	see http://zuga.net/articles/html-heading-elements/ for details */
	
body	{ font-size: 2rem; font-family:Arial; line-height:3.2rem; } /* =20px, line height = 160% of font */
h1		{ font-size: 3.2rem; line-height:5.12rem; }	/* =32px, line height = 160% of font */
h2		{ font-size: 2.4rem; }	/* =24px */
h3		{ font-size: 1.872rem; } /* =18.72px */

:root {
	--font-title: 'Cherry Cream Soda';
	--font-menu: 'Source Sans Pro';
	--font-heading: 'Cherry Cream Soda';
	--font-text: 'Roboto';
	--font-decoration: 'Coming Soon';
}


/* -------- COLOURS -------- */

:root {
	--color-brand-light: #f8de7e;
	--color-brand-medium: #ffae42;
	--color-brand-dark: #c14d36;	
	
	--color-heading: #c64538;
	--color-text; #113311;
	--color-anchor: #4169E1;
	--color-anchor-light: #6ab3e5;
	
	--color-general-dark: #000;
	--color-general-light: #fff;	
}

.odd-number-section {
	color: var(--color-brand-light);
	background-color: var(--color-brand-dark); 
}

.even-number-section {
	color: var(--color-brand-dark);
	background-color: var(--color-brand-light);
}

#intro, #problem, #solutions, #program, #partners {
	background-color:var(--color-general-light);
}

#contact {
	background-color: var(--color-brand-light);
}

/* -------- GRID -------- */

/*  sections  */

section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  column setup  */
.col {
	display: block;
	float:left;
	/*margin: 1% 0 1% 0%;*/
	margin:0;
}
.col:first-child { margin-left: 0; }

/*  grouping  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  grid of twelve  */

:root {
	--span_12_of_12: 100%;
	--span_11_of_12: 91.66%;
	--span_10_of_12: 83.33%;
	--span_9_of_12: 75%;
	--span_8_of_12: 66.66%;
	--span_7_of_12: 58.33%;
	--span_6_of_12: 50%;
	--span_5_of_12: 41.66%;
	--span_4_of_12: 33.33%;
	--span_3_of_12: 25%;
	--span_2_of_12: 16.66%;
	--span_1_of_12: 8.333%;
	--span_0pt5_of_12: 4.165%;
}

/* vertical spacers */

/*	Use in preference to hard-to-find vertical margins
	It's based on the line height of the body element (see line 13 above)
	Use like this in the html: <p class="vspacer-section-top">&nbsp;</p>
	Use like this in the css: .vspacer-section-top {width:var(vspacer_1_of_body);} */

:root {
	--vspacer_1pt75_of_body: 5.6rem;
	--vspacer_1pt5_of_body: 4.8rem;	
	--vspacer_1_of_body: 3.2rem;
	--vspacer_0pt75_of_body: 2.4rem;
	--vspacer_0pt5_of_body: 1.6rem;
}