/*
Developed & Designed by Paul Santiago
*/




/* #Reset & Basics
================================================== */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }



/* #Basic Styles
================================================== */
	body {
		background: #F2EFE4;
		font: 20px "Basis", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #333234;
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%;
		overflow-x: hidden;
 }
	.top-bar{
		width: 100%;
		padding-top: 20px;
		padding-bottom: 15px;
		position: fixed;
		transition: all .5s;
		border-bottom: 0px solid #333234;
		background: #F2EFE4;
		z-index: 99999;
		clear: both;
		box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.12);
	}
	.nav-bar{
		top: 85px;
		width: 100%!important;
		position: fixed;
		transition: all .5s;
	}
	#navbar{
		width: 100%;
		z-index: 99998;
	}
	#navbar1{
		width: 100%;
		z-index: 99998;
	}
	.menus{
		display: none;
		float:right;
		padding-top: 0px;
	}
	.menu-overlay{
		left: -500px;
		display: none;
	}
	.search-button{
		float: left;
	}
	.contact-button{
		float: right;
	}
	.donate-button{
		float: right;
		margin-right: 20px;
	}
 	.landing{
	 	height: 73vh!important;
	 	width: 100%;
		padding-bottom: 20px;

 	}
	#myVideo {
	    position: absolute;
		right: 0px;
		bottom: 0px;
		width: 100%;
		min-height: 100%;
		z-index: -1;
		opacity: .5;
	}
	.menu-logo{
		margin-top: -30px;
		padding-bottom: 50px;
	}
	.close{
		float: right;
		padding-right: 2.5%;
		margin-top: -30px;
		z-index: 99999;
	}
	.menu-links{
		font-size: 25px;
		line-height: 30px;
	}
	.menu-buttons{
		padding-top: 50px;
	}
	.footer-section{
		background: #E2572E;
		padding-top: 5%;
		padding-bottom: 5%;
		color: white;
	}
	.footer-left{
		width: 50%;
		float: left;
	}
	.footer-logo{
		padding-bottom: 50px;
		width: 300px; height: auto;
	}
	.footer-column{
		 display:inline;
		 float: right;
		width: 100px; padding: 2.5%;height: auto;
		padding-top: 0; 
	}
	.footer-link{
		color: white;
		clear:both;
		text-transform: uppercase;
		padding-bottom: 50px;
		line-height: 30px;
	}
	.social-nav{
		float: right;
		width: 120px;
		clear: both;
		margin-top: -50px;
	}
	.social-icon{
		float: left;
		padding:8%;
	}




	.scroll-container{ 
		width: auto;
		height: 50px; 
		overflow: hidden;
	}

	.scroll-container h3{
		display: inline-block;
		padding-right: 10%;
		text-transform: uppercase;
	}

.marquee-bar{ }
	.marquee2 span {
  		animation-delay: 2.5s;
	}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes marquee2 {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}.wp-block-columns.has-background {
    padding: auto!important;
}

	.green-section{
		background: #C3C975;
		padding-top: 10%!important;
		padding-bottom: 10%!imporant;
	}
.green-section h3{ color:#333234!important;}
	.yellow-section{
		background: #F4CB4A;
		padding-top: 10%!important;
		padding-bottom: 10%!imporant;
	}
	.yellow-section h3{
		color: #333234
	}
	.full-width {
	  margin-left: -5.6%;
	  margin-right: -5.6%;
	}


				

.wp-block-columns{margin-bottom:0;}


.single-page .entry-title{
	display: none;
}





.update-feed{
	float: left; width: 70%; margin-right: 2.5%;
}
.single-feed{
	float: left; width: 70%;margin-right: 2.5%;
}

.entry-terms{
	font-size: .8vw;
}
article img{width: 100%;}

.update-feed .wp-post-image{ float: left;  width: 50%; margin-right: 2.5%; padding-bottom: 20px;overflow:hidden;}
.update-feed p{ width: 45%; float: right; text-align: left;  }

.update-feed article{
border-bottom: 2px solid black; padding-bottom: 20px;margin-bottom: 20px; }

#myVideo{  filter: grayscale(1);
  -webkit-filter: grayscale(1); 
  filter: grayscale(100%); }


h2.entry-title a{
	text-transform: none; font-size: 2.5vw; line-height: auto; font-weight: normal!important; padding-bottom: 25px;
}


.entry-time{  text-transform: uppercase; }
.entry-meta{ padding-bottom: 20px!important}
.side-bar{width: 25%; float:right; clear:bottom; padding-bottom: 50px; }
.side-bar p,.entry-time{ font-size: 1vw; line-height: 1.2vw;color: #777; }

h4.widget-title{font-size: 2.5vw; line-height: auto; color: #777;  }
.entry-footer{clear: both;}


article,.more-link{clear: both; }


article:nth-last-child(1){ border-bottom: 0;  }

.wp-post-image{padding-bottom: 20px;}

.more-link{
	clear: top;
	padding-top: 20px;
	color:  #E2572E;
}
.search-overlay {
					left: -105%;
					display: block;
					position: fixed;
					top: 0px;
					width: 100%;
					float: none;
					height: auto;
					padding-top: 50px;
					padding-bottom: 50px;
					z-index: 99999;
					overflow: scroll;
					background-color:#C3C975;
					height: 100%;
					transition: all .55s;
					box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.12);
				}


.sign-up-image{
	width: 60%; 
	height: auto; 
}


/* #Typography
================================================== */

@font-face {
	font-family: 'Karelia Bold';
	src: url('https://grassrootscollaborative.org/html/typefaces/KareliaTrial-Bold.otf');

}

@font-face {
	font-family: 'Karelia Reg';
	src: url('https://grassrootscollaborative.org/html/typefaces/KareliaTrial-Regular.otf');

}

@font-face {
	font-family: 'Basis';
	src: url('https://grassrootscollaborative.org/html/typefaces/BasisGrotesque-Regular.otf');

}


	h1, h2, h3, h4, h5, h6 {
		color:  #E2572E;
		font-family: 'Karelia Bold', sans-serif;
		font-weight: normal; }
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 45px; line-height: 45px;margin-bottom: 10px; }
	h2 { margin-bottom: 20px;  font-size: 2.5vw; line-height: 3vw;  font-family: 'Karelia Reg',sans-serif!important; color: #333234; letter-spacing: -1px; }
	h3 { font-size: 45px; line-height: 50px; margin-bottom: 8px; }
	h4 { font-size: 2.5vw; line-height: 3vw; margin-bottom: 4px; font-family: 'Karelia Reg',sans-serif!important,; color: #333234; padding-bottom: 20px; letter-spacing: -1px;}
	h5 { font-size: 25px; line-height: 25px; }
	.subheader { padding-left: 5%; padding-right: 5%; font-size: 1.8vw; line-height: 1.9vw;}
	.landing .subheader{  }
	.landing-header{  font-size: 6.5vw; line-height: 6.5vw; padding-left: 5%; padding-right: 5%; text-align: center; letter-spacing: -3px; padding-bottom: 20px; color: #E2572E; padding-top: 5%; }
	.address{ font-family: 'Karelia Reg',sans-serif;  }
	.wp-block-latest-posts a{ display: block; font-size: 2.5vw; line-height: 3vw; font-family: 'Karelia Reg'!important; text-transform: none!important; }


	p { margin: 0 0 20px 0; font-size: 1.3vw; line-height: 1.6vw;  }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }

	em { font-style: italic; }
	strong { font-weight: bold; color: #333; }
	small { font-size: 80%; }

/*	Blockquotes  */
	blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
	blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
	blockquote cite { display: block; font-size: 12px; color: #555; }
	blockquote cite:before { content: "\2014 \0020"; }
	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }

	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }


/* #Links
================================================== */
	a { color: #333234; outline: 0; font-size: 1vw; text-transform: uppercase; text-decoration: none; }
	a:hover { color: #000; }
	p a, p a:visited { line-height: inherit; }


/* #Lists
================================================== */
	ul, ol { margin-bottom: 0px; }
.wp-block-latest-posts.is-grid li{padding-left: 0!important; }
	li {  margin-bottom: 12px; padding-left: 5%; display: inline; float: right; }
	ul.large li { line-height: 21px; }
	li p { line-height: 21px; }
	nav { width:70%; float: right; }
.menu-overlay li{padding-left: 0; display: block; float: none; text-align: left; font-size: 25px!important; }
.menu-overlay li a{ font-size: 25px!important; }


/* #Images
================================================== */

	img,video{ width: auto; max-width: 100%; height: auto; margin: 0 auto 0em; }
.wp-block-image img{ width: 100%; height: auto; }
.wp-block-latest-posts__featured-image img{ width: 100%; height: auto;}


/* #Buttons
================================================== */

	.wp-block-button__link,
.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		background: #E2572E; /* Old browsers */
	  border: 0px solid #aaa;
	  -moz-border-radius: 15px;
	  -webkit-border-radius: 15px;
	  border-radius: 15px;
		box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.12);
	  color: white!important;
	  display: inline-block;
	  font-size: .8vw;
	  font-weight: normal;
	  text-decoration: none;
	  text-shadow: 0;
	  cursor: pointer;
	  margin-bottom: 20px;
	  line-height: normal;
	  padding: 15px 25px;
	  font-family: "Basis", "Helvetica Neue", Helvetica, Arial, sans-serif;
	transition: all 0.25s; }

	.wp-block-button__link:hover,.button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
		color: black!important;
		background: white;
	box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.12);  }

	.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {

		background: #eee;
 }

	.button.full-width,
	button.full-width,
	input[type="submit"].full-width,
	input[type="reset"].full-width,
	input[type="button"].full-width {
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center; }

	/* Fix for odd Mozilla border & padding issues */
	button::-moz-focus-inner,
	input::-moz-focus-inner {
    border: 0;
    padding: 0;
	}


/* #Forms
================================================== */
	.search-container{width: 80%; margin: 0 auto; }
	form {
		margin-bottom: 20px; }
	fieldset {
		margin-bottom: 20px; }
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		border: 0!important;
		border-bottom: 0px solid black!important;
		padding: 20px 10px;
		outline: none;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		border-radius: 15px;
		font: 20px "Basis", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: black;
		margin: 0;
		width: 98%;
		max-width: 100%;
		display: block;
		margin-bottom: 20px;
		background: #fff; }
	select {
		padding: 0; }
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus {

 		color: black;
 	 }
	textarea {
		min-height: 60px; }
	label,
	legend {
		display: block;
		font-weight: bold;
		font-size: 13px;  }
	select {
		width: 220px; }
	input[type="checkbox"] {
		display: inline; }
	label span,
	legend span {
		font-weight: normal;
		font-size: 13px;
		color: black; }

/* #Misc
================================================== */
	.remove-bottom { margin-bottom: 0 !important; }
	.half-bottom { margin-bottom: 10px !important; }
	.add-bottom { margin-bottom: 20px !important; }
	.margin { padding-top: 15%; }
	.margin2{ padding-top: 10%; }






    .container                                  { width: 95%; margin: 0 auto; padding: 0; }
    .container .column,
    .container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }
		.two { width: 48%;}
		.two:nth-child(1){ float: left; }
		.two:nth-last-child(1){ float: right; }


/* #imac
================================================== */

	@media only screen and (min-width: 1400px) and (max-width: 2000px) {
		h4{ font-size: 2vw; line-height: 2.5vw; }
		
h4.widget-title{font-size: 2vw; line-height: 2.5vw;   }
		a {  font-size: .7vw; }
		.wp-block-latest-posts .more-link{ font-size: .7vw!important;}
		.wp-block-button__link,
.button,
	button,
	input[type="submit"],
	input[type="reset"],
		input[type="button"] {font-size: .7vw;}
}



/* #Bigger Tablet (Portrait)
================================================== */

	@media only screen and (min-width: 968px) and (max-width: 1059px) {
		
		.margin2{
			padding-top: 0%;
		}
		.landing{height: auto;}
		
		.update-feed .wp-post-image{ float: none;  width: 100%; margin-right: 0%; padding-bottom: 20px;overflow:hidden;}
		.update-feed p{ width: 100%; float:none; text-align: left;  }
.side-bar p{ font-size: 1.5vw; line-height: 1.8vw; color: #777; }
		
}


/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 788px) and (max-width: 959px) {
        .container                                  { width: 95%; }
        .container .columns,
        .container .column { margin: 0; }
				.landing-header{
					 letter-spacing: -2px;
					 padding-top: 10%;
				}
		.wp-block-latest-posts__list a{ font-size: 10px!important;}
		
		p{ font-size: 1.5vw; line-height: 1.8vw; }
		.entry-time.side-bar p{ font-size: 1.5vw; line-height: 1.8vw;color: #777; }
.wp-block-button__link,
.button,
	button,
	input[type="submit"],
	input[type="reset"],
		input[type="button"] {font-size: 10px;}
		.margin2{ padding-top: 15%; }
		
		
.update-feed .wp-post-image{ float: none;  width: 100%; margin-right: 0%; padding-bottom: 20px;overflow:hidden;}
.update-feed p{ width: 100%; float:none; text-align: left;  }
		.landing{height: auto;}
    }



@media only screen and (min-width: 668px) and (max-width: 759px) {
	.wp-block-latest-posts.is-grid li{padding-left: 1%!important; }
	.landing{height: auto;}
}



/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 650px) {
        .container { width: 95%; margin: 0 auto;}
        .container .columns,
        .container .column { margin: 0; }
		.wp-block-latest-posts .more-link{ font-size: 18px!important;}
		h2.entry-title a{ font-size: 25px!important; line-height: 20px!important;  }
		.wp-block-latest-posts a{ display: block; font-size: 25px!important; line-height: 20px!important;  font-family: 'Karelia Reg'!important; }
		.entry-time,p,a{ font-size: 18px; line-height: 20px; }
		.side-bar p{ font-size: 18px; line-height: 20px;}
		h2,h4{ font-size: 25px; line-height: 25px; }
		.wp-block-latest-posts__list a{font-size: 12px!important;  
}
				.top-nav,#navbar1{
					display: none;
				}
				.landing{
					height: auto;
					background: url('/wp-content/uploads/2021/04/bg.png');
					background-position: center center;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
					background-size: cover;
					padding-bottom: 10%;
					margin-top: -100px;
				}
				.menus{
					display: block;
					transition: all .25s;
				}
				.menus:hover{
					opacity: .7;
				}
				.menu-overlay {
					left: -800px;
					display: block;
					position: fixed;
					top: 0px;
					width: 100%;
					float: none;
					height: auto;
					padding-top: 50px;
					padding-bottom: 50px;
					z-index: 99999;
					overflow: scroll;
					background-color:#F4CB4A;
					height: 100%;
					transition: all .55s;
					box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.12);
				}
				.landing-header{
					 letter-spacing: -1px;
					 padding-top: 150px!important;
				}
				.subheader{
					font-size: 15px;
					line-height: 20px;
				}
				.footer-left{
					width: 100%;
					float: none;
				}
				.footer-column{
					float: none;
					text-align: left;
					padding-left: 0;
					padding-right: 0;
				}
				.social-nav{
					float: left;
					margin-top: 0px;
				}
				.social-icon{
					padding-left: 0%;
					padding-right: 10%;
				}
				.landing-header{
					font-size: 9.5vw;
					line-height: 8.5vw;
    }
		#myVideo {
			position: relative;
			display: none ;
			padding-bottom: 0;
			bottom: auto;
			top: 0!important;
			min-width: 100%;
			min-height: 100%;
			z-index: -1;
		}
		.full-width {
		  margin-left: -15%!important;
		  margin-right: -15%!important;
		}
		.two{float: none!important; width: 100%;}
		.two:nth-child(1){ float: none; }
		.two:nth-last-child(1){ float: none; }
		.margin2{ padding-top: 15%; }
		.green-section,.yellow-section{ padding-top: 20%; padding-bottom: 20%;}
		.update-feed{
	float: none; width: 100%;margin-right: 0; padding-right: 0; 
}
.side-bar{
	float: right; 
	width: 95%;
	border-top: 0px solid black; 
	padding-top: 50px;
	padding-bottom: 50px;
	background: #f4cb4a;
	margin-left: -2.6%; 
	margin-right: -2.6%;
	text-align: center; 
	padding: 5%;
	
}
		.wp-block-button__link,
.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		font-size: 10px;
		}
		.update-feed .wp-post-image{ float: none;  width: 100%; margin-right: 0%; padding-bottom: 20px;overflow:hidden;}
		.single-feed{
	float: none; width: 100%;margin-right: 0%;
}
		h4.widget-title{ font-size: 25px; line-height: auto;  }
		.wp-block-column ul li{list-style: square!important; text-align: left;padding-bottom: 20px;  padding-left: 5%; display: block; float:none;  }
		.wp-block-latest-posts.is-grid li{margin: 0;}
		.search-container{width: 90%; margin: 0 auto; padding-top: 5%; }
		
		.yellow-section .wpcf7-text.wpcf7-validates-as-required{float: none!important; width: 95%!important;margin-bottom: 0px; }
.yellow-section .wpcf7-email.wpcf7-validates-as-required{float: none!important; clear: none!important; display: inline-block!important; margin-top: 20px;}
		
		.sign-up-image{
	width: 100%; 
	height: auto; 
}
		
		.update-feed p{ width: 100%; float: right; text-align: left;  }
	.footer-logo{
		padding-bottom: 50px;
		width: 100%; height: auto;
	}
	}


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 95%; }
        .container .columns,
        .container .column { margin: 0; }
				.landing-header { padding-top: 5%!important; }
				.landing{	height:auto!important;	padding-bottom: 5%;	}
		
.full-width {
		  margin-left: -2.6%!important;
		  margin-right: -2.6%!important;
		}
		.wp-block-latest-posts.is-grid li{ margin:1.5%; }
		
		
    }


/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }