/* ==|== primary styles =====================================================
   Author: Silverink
   ========================================================================== */
@font-face {   /* ICON SET FONT */
}


/* FONTS

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

font-family: 'Lobster Two', cursive;

*/
.appwrapper {width: 90%; overflow: hidden;}
a:link {color: rgb(165,67,154);}
a:visited {color: rgb(165,67,154);}
a:hover {color: rgba(213,88,213,1);}
a:active {color: rgb(165,67,154);}

body {
	font-family: 'Open Sans', sans-serif;
	color: rgb(26,26,26);
	z-index: 1;
	background: rgb(236,236,236);
}

body .body1class, .body1class #MainHTML .wrapper, .body1class #MainHTML {background: none; padding: 0; max-width: none; margin: 0 !important;}
/* BreadCrumb */
.body1class .bCrumb, .templateNews .bCrumb {display: none;}
#MainHTML { line-height: 150%;}
nav.bCrumb {
	margin-bottom: 20px;
	background: rgb(226,226,226);
	margin-left: 0px;
	padding: 0px 0;
	margin-bottom: 0px;
	height: 50px;
	vertical-align: middle;
}
nav.bCrumb ul {padding: 0; }
nav.bCrumb li {
	display: inline-block; margin-right: 10px; color: #2d3b3f; vertical-align: middle; font-size: 0.875em;}
nav.bCrumb li * {margin-right: 10px; font-weight: 100; vertical-align: middle;line-height: 50px;}
	.bCrumb li:after {content: " "; display: inline-block; background-image: url("crumb.png"); width: 20px; height: 50px;vertical-align: middle;}
	.bCrumb li:last-child:after {content: " "; background-image: none;}

nav.bCrumb.stuck {position: fixed; top: 100px; width: 100%; z-index: 1000;}

h1,h2,h3,h4,h5,h6 {font-weight: 100 !important; margin: 0; line-height: 150%;}
/* ==|== Easibuild Structural Elements =====================================================
   Structural elements such as mainContent/Wide, submenu etc. Ideally these elements will change
   to HTML5 tags...  aside, article etc.
   ========================================================================== */

/* MainHTML Wrapper - common to both wide and normal */
	#MainHTML article {margin-bottom: 10px;}
	#MainHTML .wrapper {background: rgb(255,255,255); padding: 35px 0px}
	#MainHTML h1,#MainHTML h2,#MainHTML h3,#MainHTML h4,#MainHTML h5,#MainHTML h6 {margin-bottom: 20px;}
	#MainHTML h1 {font-family: "Open Sans", cursive;}
	#MainHTML h2 {font-family: "Open Sans", cursive; font-size: 1.75em; margin-top: 15px; padding-top: 25px; border-top: 1px dotted rgb(221,221,221);}
	#MainHTML h3 {font-size: 1.125em; color: rgb(80,80,80)}
/* BreadCrumb */





/* Submenu Specific Structure */

/* submenu */
#subMenu { padding: 10px 0px; border-top: 1px solid #953286 ;  }
#subMenu h3 {color: #000;}
	#subMenu ul {margin: 0; padding: 0; list-style-type: none;}
	#subMenu li a {color: rgb(29,29,29); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #66b439; display: block;}

/* 3rd party map page */
.body6class #topBanner {position: static;}
.body6class .sticky-wrapper {display: none;}
.body6class iframe {width: 100%; height: 100%; min-height: 850px; border: none; margin-top: -35px; margin-bottom: -50px; z-index: 1; }
.body6class  #MainHTML .row {width: 90%; margin: auto;}

/* ==|== Everything Else =====================================================================
   Alphabetically ordered unles it's nested (.level2 will be nested with #submenu for example)
   =========================================================================================== */
/* CALL TO ACTION - TO APPEAR MOBILE ONLY */
a.cta {display: block; text-align: center; color: #fff; font-size: 2em; font-weight: 100 !important; background: rgb(123,193,68); margin-top: 0px;}

/* Hidden elements */
.bCrumb, #MainHTML article header {}

blockquote {line-height: 160%; font-family: "Open Sans"; font-style: italic;  margin: 20px 5%; border-left: 1px solid rgb(123,193,68); }


.ContactDetails h1, .ContactForm h1 {font-size: 1.75em;}
	.ContactForm label {display: block;}
	.ContactForm div {margin-bottom: 10px;}
	.ContactForm input[type='text'], .ContactForm input[type='tel'], .ContactForm input[type='email'], .ContactForm textarea {border: 1px solid #888;}
	#email {display: none;}

img,embed,object,video {
}


/* SILVERINK LINK */
#silverinkWebDesign {
	font-size: 10px;
	font-family: helvetica, arial;
}
#silverinkWebDesign 	a {
	color: #888;
}

footer {background: rgb(62,62,62); width: 100%; height: 160px; position: static; bottom: 0px; color: rgb(126,126,126)}
footer .address, footer .telephone { font-size: 0.75em; margin-top: 20px;}
	footer .telephone {text-align: right;}

/* FP IMAGES */
#fpImageDiv {margin-top: 130px; position: relative;z-index: -1; width: 100%;}
.fpImages {  background: rgb(165,67,154);}
.fpImages img {width: 100% ;}
	.fpImages .heading {display: none;}
	.fpImages .Desc {position: relative; bottom: 0px; left: 0px; width: 100%; display: block; margin-bottom: 20px;}
		.fpImages .Desc .descWrap { display: block; width: 80%; margin: 10px auto 10px; color: rgb(255,255,255); font-family: "open Sans"; font-size: 1.4em; line-height: 160%; text-align: center; }
		.fpImages .summary {font-size: 1.5em; position: absolute; top: 170px; left: 0%; padding: 15px 15px 5px 15px; color: #fff; background: rgba(84,166,44,0.8); margin-bottom: 0px; font-style: italic; line-height: 0.5em;}
		#fadeNav {position: relative; text-align: center; background: rgb(165,67,154); color: rgba(255,255,255,0.4); font-size: 3.25em; display: block; clear: both;  width: 100%; line-height: 100%;}
			#fadeNav span {cursor: pointer; padding:2px;}
			#fadeNav .cycle-pager-active {color: rgb(255,255,255);}
			.cycle-slide {overflow: hidden; padding-bottom: 20px; width: 100% !important;}
/* END FP IMAGES */


/* HEADER IMAGES BASED ON ITEMID */
.headerImage {width: 100%; height: 250px; background-size: cover; margin-top: 100px; background-position: center center; background-image: url("/download/images/defaultBannerImage.jpg")}

/* ABOUT HEADER IMAGE */
.body2class .headerImage {background-image: url("/download/images/aboutHeaderImage.jpg")}

/* PARTNER HEADER IMAGE */
.body5class .headerImage {background-image: url("/download/images/partnerHeaderImage.jpg")}

.body11class .headerImage {background-image: none;}

/* MAP HEADER IMAGE  */
.body6class .headerImage {display: none;}

/* PROJECTS HEADER IMAGE */
.body12class .headerImage, .body13class .headerImage {background-image: url("/download/images/projectsHeaderImage.jpg")}

/* VOLUNTEERING HEADER IMAGE */
.body9class .headerImage {background-image: url("/download/images/volunteeringHeaderImage.jpg")}

/* DONATE HEADER IMAGE */
.body10class .headerImage {background-image: url("/download/images/donateHeaderImage.jpg")}

/* DONATE BUTTONS */
button {width: 100%; display: block; padding: 10px; font-size: 1.25em; text-transform: uppercase; background: rgb(165,67,154); color: #fff; border: 1px solid #fff;}



/* THEMES PAGE */
.body12class figure {padding-bottom: 0px; border-bottom: 2px solid rgb(123,193,68); position: relative; max-width: 400px; margin: auto; margin-bottom: 40px; }
	.body12class figure > h3 {position: absolute; top: 0px; left: 0px; padding: 10px; background: rgba(165,67,154,0.8); color: rgb(255,255,255) !important; font-size: 1.25em !important; text-shadow: 0px 0px 10px rgba(0,0,0,0.6); display: block; line-height: 15px;}
	.body12class figure p {padding: 10px; background: rgb(240,240,240); margin-bottom: 0px; font-size: 0.875em;}
		.body12class figure i {display: block;}



figure {max-width:100%; margin-bottom: 15px;}
	figure img {max-width: 100%; height: auto; margin: auto;}
	figure figcaption {font-size: 0.75em; color: rgb(80,80,80)}

figure.rightFig { max-width: 100%;}

#homeEditable {
padding-top: 10px;
display: none;
}


.GalleryItems figure {width: 40%; float: left; position: relative; margin: 0 5% 60px 5%;}
	#MainHTML .GalleryItems figure h2 {font-family: "Open Sans", sans-serif; font-style: normal; font-size: 1em; padding: 5%; text-align: center; border-bottom: 1px dotted rgb(221,221,221); margin-bottom: 0px;}
	.GalleryItems figcaption {position: relative; font-size: 0.875em; padding: 5%; border-top: 1px dotted rgb(221,221,221); }
#homeEditable p:first-child {
}




#logo {
	cursor: pointer;
	width: 200px;
	height: auto;
	margin: 10px 0px;
	}
	#logo img {width: 100%; height: auto;}

hr {
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 1px dashed rgb(219,219,219);
	margin: 20px 0px;
	clear: both;
	}

.leftColumn, .rightColumn {margin-top: 0px;}



.mobileMenuIcon {position: absolute;  right: 5%; z-index: 5000; width: 20px; height:20px; top: 40px;
}
.mobileMenuIcon span, .mobileMenuIcon span:before, .mobileMenuIcon span:after {
  cursor: pointer;
  border-radius: 2px;
  height: 2px;
  width: 20px;
  background: rgb(165,67,154);
  position: absolute;
  display: block;
  content: '';
}
.mobileMenuIcon span:before {
  top: -5px;
}
.mobileMenuIcon span:after {
  bottom: -5px;
}


.mobileMenuIcon span, .mobileMenuIcon span:before, .mobileMenuIcon span:after {
  transition: all 500ms ease-in-out;
}
.mobileMenuIcon.active span {
  background-color: transparent;
}
.mobileMenuIcon.active span:before, .mobileMenuIcon.active span:after {
  top: 0;
}
.mobileMenuIcon.active span:before {
  transform: rotate(45deg);
}
.mobileMenuIcon.active span:after {
  transform: rotate(-45deg);
}
/*hide fake email input from client */
.notEmail {
	display: none;
}

/* rightCol Aside */
.rightColumn aside, .leftColumn aside {
position: relative;
font-size: 1em;
padding: 10%;
background: #dedede;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #ddd;
}

.rightColumn aside:after
{
content: '';
position: absolute;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;

	border-right:10px solid #ddd;
display: block;
width: 0;
z-index: 1;
bottom: 15px;
left: -10px;
}

.body20class aside > p > a[href="https://www.adsumfoundation.org/bikes/raffle"] {
	background: #a54399; color: #fff;
	display: block;
	padding: 10px;
	text-align: center
}
.body20class aside > p > a[href="https://www.adsumfoundation.org/bikes/raffle"] strong {font-size: 2rem; display: block; text-align: center; margin-bottom: 10px;}
.leftColumn aside {margin-top: 40px;}

.leftColumn aside:after {
content: '';
position: absolute;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;

	border-left:10px solid #ddd;
display: block;
width: 0;
z-index: 1;
bottom: 15px;
right: -10px;
	}
.socialShare {padding: 10px 0px; border-top: 1px solid #67b439; border-bottom: 1px solid #67b439;text-align: center;}
	.socialShare p { font-size: 0.875em;}
	.socialShare .icons a {font-size: 1.5em; padding: 0px 10px; text-decoration: none;}

.shareIcons { margin-top: 10px; font-size: 2em;}


.signupForm {background: #e2f0d2; display: block; margin-bottom: 30px; padding: 15px; 
}

.slideDownForm {position: fixed; top: 0; left: 0; z-index: 20000; display: none; background: rgb(105,181,52); background: rgba(105,181,52,0.95); width: 100%; color: rgb(255,255,255);}
	.slideDownForm h3 {margin-bottom: 10px;}
	.slideDownForm form {padding-bottom: 15px;}
	.slideDownForm input {color: #444; margin-bottom: 5px;}
	.slideDownForm label {margin-right: 10px; min-width: 70px;}
	.closeBar {background: #963287; color: #fff; padding: 5px; cursor: pointer; text-align: right;}

/* templates */
.templateNews blockquote {margin-top: 80px; border-left: none; border-top: 2px solid rgb(123,193,68); margin-left: 0px; font-family: "open Sans", sans-serif; font-style: normal; font-size: 0.875em; background: rgba(221,242,224,1)}
.templateNews blockquote strong {color: rgb(165,67,154)}
.templateNews figure {margin: auto; max-width: 280px;}

#topBanner {
	min-height: 100px;
	width: 100%;
	position: fixed; z-index: 20; top: 0px; left: 0px; background: #fff;
	border-bottom: 5px solid rgb(123,193,68);
	background: #fff;
}

#topBanner .row, footer .row, .breadCrumb, #MainHTML .row {max-width: 1180px;   /* Your page width */
    margin: 0 auto; /* To center your page within the body */}

    .body6class #MainHTML .row {max-width: 100%;}

#topBanner .wrapper {display: block; position: relative; background: #fff;}
#topMenu {position: relative; top: -50px; left: 0px; text-align: right; }
#topMenu ul  { display: none; padding: 2%; margin: 100px 0 10px 0px; position: relative; left: 10px; top: -10px; z-index: auto; background: rgb(123,193,68); width: 96%;}
#topMenu ul li a { color: rgb(255,255,255);  text-decoration: none; }
	#topMenu li.selected a {color: #a6e494;}
#topMenu ul li { list-style-type: none; display: block; font-size: 1em; text-align: center; line-height: 40px; margin: 0; }




















.month, .year {cursor: pointer;}






 .desktop {display: none;}
 .mobile {display: block;}


.templateNews  .desktop {display: block;}
.templateNews .mobile {display: none;}

/* ==|== media queries ======================================================
   Media Queries for Responsive Design.
   These override the primary ('mobile/desktop first') styles
   Modify as content requires.
   ========================================================================== */




/*===============================*/
/* 480 - LANDSCAPE MOBILE LAYOUT */
/*===============================*/

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */
  figure.rightFig { max-width: 50%; float: right !important;}

}





















/*=====================*/
/* 768 - TABLET LAYOUT */
/*=====================*/
@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
  a.cta {display: none;}
  .leftColumn, .rightColumn {margin-top: 85px;}
.headerImage {height: 400px;}
  /* FP IMAGES */
#fpImageDiv {margin-top: 100px; }
	.fpImages .Desc {position: absolute; left: 25%; background: rgba(165,67,154,0.7); width: 50%; text-shadow: 0px 0px 8px #000; }
		.fpImages .Desc .descWrap {width: 90%; font-size: 1.75em; line-height: 160%; text-align: center; }
		#fadeNav {text-align: center; background: rgb(165,67,154); color: rgba(255,255,255,0.4); font-size: 3.25em;  line-height: 90%;display: block; width: 100%; margin-top: -10px;}
			#fadeNav span {cursor: pointer; padding:2px; }
			#fadeNav .cycle-pager-active {color: rgb(255,255,255);}
/* END FP IMAGES */
.GalleryItems figure {width: 22%; float: left; position: relative; margin: 0 5% 60px 5%;}

 .desktop {display: block;}
 .mobile {display: none;}


figure.rightFig { max-width: 50%; float: right !important;}


 /* TEMPLATES */

 .templateNews figure {float: right; margin-left: 20px;}


}












/*=======================*/
/* 1024 - DESKTOP LAYOUT */
/*=======================*/
@media only screen and (min-width: 1024px) {
  /* Style adjustments for viewports 1024px and over go here */
.GalleryItems figure {width: 15%; float: left; position: relative; margin: 0 5% 60px 5%;}


 /* THEMES PAGE */
.body12class figure {width: 48%; float: left; margin-left: 2%; }

  	footer {position: relative;}
  	#fpImageDiv {position: relative; height: 700px; overflow: hidden;}
  		.cycle-slide img {margin-top: -200px;}
  		.cycle-slide .Desc {position: absolute; bottom: -10px;}
  		.cycle-slide {height: 700px;}
	  .mobileMenuIcon {display: none;}
	  #topMenu {position: relative;}
	  #topMenu ul {display: block;}
	  	#topMenu li {display: inline; text-transform: uppercase; font-size: 1em; letter-spacing: 0.025em; margin: auto 1%; }
	  	#topMenu ul  { padding: 2%; margin: 0px;  z-index: 10000; background: none; position: absolute; right: 0px; top: 85px;}
		#topMenu ul li a { color: rgb(60,60,60);  text-decoration: none; }
	#topMenu li.selected a {color: rgb(165,67,154);}
#topMenu ul li { list-style-type: none; display: inline-block; padding: 0px 10px; font-size: 0.875em; text-align: left;margin: 0; }

}










/* WIDE DESKTOP LAYOUT */
@media only screen and (min-width: 1176px) {
  /* Style adjustments for viewports 1176px and over go here */
  #topMenu ul li {font-size: 1.1em;}

}











/* RETINA OVERRIDES */
@media only screen and (-webkit-min-device-pixel-ratio : 1), only screen and (min-device-pixel-ratio : 1) {
}




















/* ==|== non-semantic helper classes - NO NEED TO TOUCH ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}