body{background:#eee; font-family:'Nunito Sans', Arial, sans-serif; font-size:16px;}
/*
0.75em = 12px
0.875 = 14px
1em = 16px
1.25em = 20px
1.5em = 24px
2em = 32px

Scout Purple: #7413DC
Scout Teal: #088486
Beaver Blue: #006DDF
Cub Green: #23A950
Scout Green: #004851
Explorer Blue: #003982

Nunito Sans
Black 900 - Headlines and hastags
Extra-Bold 800 - Local Personalisation within logotypes
Bold 700 - Highlighting information in body text
Regular 400 - Body text when on a solid colour
Light 300 - Body text when on a white background
*/
h1, h2, h3, h4, h5, p{margin:0;padding:0;}

/*@font-face{font-family:TheSerifLight; src:url('./fonts/TheSerif_ExtraLight.ttf');}*/

h1{padding:10px 0px 5px 0px; margin:0px 20px; font-size:2em; font-family:'Nunito Sans', sans-serif; font-weight:900; color:#ffffff; line-height:1em;}
h2{padding:10px 0px 5px 0px; margin:0px 20px; font-size:1.5em; font-family:'Nunito Sans', sans-serif; font-weight:900; color:#088486;}
h3{padding:15px 0px 0px 0px; margin:0px; font-size:1.5em; font-family:'Nunito Sans', sans-serif; font-weight:900; color:#ffffff;}
h4{padding:5px 0px 0px 0px; margin:0px 20px; font-size:1.25em; font-family:'Nunito Sans', sans-serif; font-weight:900; color:#088486;}
h5{font-size:1em; font-family:'Nunito Sans', sans-serif; font-weight:700; color:#000000;}
h6{font-size:0.875em; font-family:'Nunito Sans', sans-serif; font-weight:700; color:#FFFFFF;}
h5.beaver{color:#006DDF;} h5.cub{color:#23A950;} h5.scout{color:#004851;} h5.explorer{color:#003982;}

#purpleStripe{
	padding:0;
	margin-top:0px;
	background: #7413DC;
}
#logo{text-align:center;}
#heroBanner{
	height:200px;
	padding-right:10px;
	position:relative;
	overflow:hidden;
}
#heroBanner img{
width:100%;
position:relative; 
top:-50px;
left:0px;
--wave:
	radial-gradient(15px at 21px 50%,#000 99%,#0000 101%) 0 calc(50% - 24px)/51% 48px repeat-y,
	radial-gradient(15px at -9px 50%,#0000 99%,#000 101%) 12px 50%/calc(51% - 12px) 48px repeat-y,
	radial-gradient(15px at calc(100% - 21px) 50%,#000 99%,#0000 101%) 100% calc(50% - 24px)/51% 48px repeat-y,
	radial-gradient(15px at calc(100% + 9px) 50%,#0000 99%,#000 101%) calc(100% - 12px) 50%/calc(51% - 12px) 48px repeat-y;
-webkit-mask: var(--wave);
mask: var(--wave);
}

.white{background:#FFFFFF; box-shadow: 0px 0px 3px #ccc;}
.white h2{text-align:center; border-bottom:1px solid #088486;}
.white h4{text-align:center; border-bottom:1px solid #088486;}
/*.white p{padding:15px 20px 20px 20px; font-size:0.875em; color:red; text-align:justify; line-height:1.4em;}*/

.red{background:#BA0C2F; box-shadow: 0px 0px 10px #ccc; color:#fff; /*border:1px solid #000;*/}
.teal{background:#088486; box-shadow: 0px 0px 10px #ccc; color:#fff;}
.purple{background:#7413DC; box-shadow: 0px 0px 10px #ccc; color:#fff;}
.beaverBlue{background:#006DDF; box-shadow: 0px 0px 3px #ccc; color:#fff;}
.cubGreen{background:#23A950; box-shadow: 0px 0px 3px #ccc; color:#fff;}
.scoutGreen{background:#004851; box-shadow: 0px 0px 3px #ccc; color:#fff;}
.explorerBlue{background:#003982; box-shadow: 0px 0px 3px #ccc; color:#fff;}

/*.beaverBlue h5, .cubGreen h5, .scoutGreen h5, .explorerBlue h5{margin:5px 10px; text-align:center; color:#FFFFFF; border-bottom:1px solid #FFFFFF;}*/

p.largeText{padding-bottom:10px; font-size:0.875em; text-align:justify; line-height:1.5em; color:#333}
p.smallText{padding:10px 20px; font-size:0.75em; color:#333; text-align:center;}

#beaverGroup{
	width:100px;
	height:300px;
	position:absolute;
	top:40px;
	left:-90px;
	background-image:url('sectionAssets/Beaver_group_stacked_100px.png');
	background-repeat:no-repeat;
}

#calendarTable, #sectionTable{width:100%; border-collapse:collapse;}

#calendarTable td:first-of-type{width:40%; text-align:right; text-indent:0px;}
#calendarTable td{padding:10px 0px; font-size:0.875em; text-align:left; color:#333; border-bottom:1px solid #ddd;}
#calendarTable tr:nth-of-type(even){background:#fafafa;}
#calendarTable tr:last-of-type > td, #sectionTable tr:last-of-type > td{border-bottom:none;}
#calendarTable td sup{font-size:0.75em; vertical-align:text-top;}

#sectionTable tr{height:120px;}
#sectionTable td{width:30%; padding:8px 0px; font-size:1em; text-align:center; border-bottom:1px solid #888;}
/*#sectionTable td:nth-of-type(1){width:30%;}/*What to do with extra 10%???*/
#sectionTable td img{width:150px;}
#sectionTable h5{margin-top:5px;}

.sectionInfo{height:220px; text-align:center;}
.sectionInfo h6{margin:0px 10px; border-bottom:1px solid #FFFFFF;}
.sectionInfo img{max-width:150px; max-height:45px; /*margin:10px 0px;*/}
.sectionInfo p{padding:0px 10px; /*font-family:'Nunito Sans', sans-serif;*/ }
.sectionInfo a{font-size:0.825em; line-height:4em; color:#FFFFFF;}
.sectionInfo a:hover{color:#CCCCCC;}
.sectionInfo table{width:100%;}
.sectionInfo tr:nth-of-type(1){height:60px;}
.sectionInfo tr:nth-of-type(2){height:30px;}
/*.sectionInfo tr:nth-of-type(3){height:110px;}*/
.sectionInfo tr:nth-of-type(2) td, .sectionInfo tr:nth-of-type(3) td{vertical-align:top;}

#sectionFindOutMore, #findOutMoreBeavers, #findOutMoreCubs, #findOutMoreScouts, #findOutMoreExplorers{display:none;}

.sectionNav ul{margin:0; padding:0;}
.sectionNav li{padding:10px 0px 10px 10px; list-style-type:none; border-bottom:1px solid #FFF}
.beaverBlue .sectionNav .selected{color:#006DDF ;background:#FFFFFF}

.sectionBlurb{padding:20px 3% 0px 3%;}
.sectionBlurbLogo{margin:0px 0px 5px 0px; text-align:center;}
.sectionBlurbLogo img{max-width:150px; max-height:45px; margin:0px 0px 5px 0px;}
.sectionBlurb ul{margin-top:0;}

.sectionImage{padding:15px;}
.sectionImage img{width:100%; box-shadow:  0px 0px 5px 00px #333333;}

.sectionDetail{padding:20px 3% 20px 3%;}
.sectionDetail h1{margin:0;}

.chevronLeft{width:20%; height:100%; position:absolute; top:0; left:0;}
.chevronLeft img{width:24px; position:absolute; top:50%; margin-top:-12px; left:30%;}
.chevronRight{width:20%; height:100%; position:absolute; top:0; right:0;}
.chevronRight img{width:24px; position:absolute; top:50%; margin-top:-12px; right:30%}

#badgeViewport, #uniformViewport{height:150px; width:100%; margin-top:0px; position:relative; text-align:center; overflow:hidden;}

#badgeImageContainer, #uniformImageContainer{
	height:100%;
	width:400%;
	transition: margin-left 0.5s;
	-webkit-transition: margin-left 0.5s;
	-moz-transition: margin-left 0.5s;
	-ms-transition: margin-left 0.5s;
}
.badgeImage, .uniformImage{width:25%; float:left;}
.badgeImage img{width:100px; margin:10px auto}
.uniformImage img{width:100px; margin:10px auto}
.badgeImage a, .uniformImage a{text-decoration:none;}

#whereWeAre{height:167px; margin:20px; text-align:center; overflow:hidden;}
#whereWeAre img{width:640px; position:relative; top:-85px; left:-110px;}

.formMessage{
	width:100%;
	min-height:70px;
	padding:10px;
	margin:5px 0px;
	box-sizing:border-box;
	
	color:#ffffff;
	font-size:0.875em;
}
.formMessage ul{margin:5px 0px;}
.formMessage svg{float:left; margin:0px 20px 0px 0px;}
.bad{background:#BA0C2F;}
.good{background:#23A950;}

#contactFormContainer{width:50%; padding:0px 20px 20px 20px; margin:20px auto 0px auto; box-sizing:border-box;}
#contactForm{}
#contactForm label{font-size:0.875em;}
#contactForm input, textarea{-webkit-appearance: none; -webkit-border-radius: 0; font-size: initial;}
#contactForm .textInput{
	width:100%;
	padding:4px 4px;
	margin-bottom:10px;
	background:#fafafa;
	border:1px solid #dddddd;
	border-radius:0;
}
#contactForm .textInput:focus{background:#ffffff; border-color:#088486;}
/*#contactForm textarea{margin:0px 0px 10px 10px; background:#fafafa; border:1px solid #dddddd;}
#contactForm textarea:focus{background:#ffffff; border-color:#BA0C2F;}*/
#contactForm .submitInput{width:20%; padding:5px; background:#7413DC; color:#FFFFFF; font-size:14px; border:1px solid #7413DC; border-radius:0;}
#contactForm p{display:none;}

#footer {text-align:center; padding:30px 0px 50px 0px;}
#footer p{padding:0px 20px; margin-bottom:3px; font-size:0.625em; color:#333;}

@media (max-width:600px){
	#contactFormContainer{width:100%;}
	#sectionTable tr{height:100px;}
	#sectionTable td:nth-of-type(1){width:25%;}
	#sectionTable td img{width:90px;}
	/*#logo{left:7.5%; margin-left:0; width:85%;}*/
	#heroBanner{padding-right:0px;}
	#heroBanner img{-webkit-mask:none; mask:none;}
}
@media (max-width:750px){

}
@media (max-width:875px){
	.sectionInfo{height:250px;}
}