@import url('community-single.css');
@import url('comments.css');

#ej-community .gform_wrapper ul.gform_fields li.gfield {
	padding: 0;
	margin: 10px 0 0;
}

#ej-community div.ginput_container {
	margin: 0;
}

#ej-community input[type="text"],
#ej-community textarea {
	border: 1px solid #CDCDCD;
	width: 100%;
}

#ej-community input[type="text"] {
	padding: 10px;
	min-height: 45px;
}

#ej-community input[type="submit"] {
	display: block;
	padding: 10px 20px;
	color: #FFF;
	background: #5fab32;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
}

#ej-community .gform_footer {
	border-bottom: 6px solid #CDCDCD;
	margin-top: 0px;
}

#ej-community .gform_wrapper .gfield_description { 
	width: 100%; 
	font-weight: 400; 
	line-height: 18px; 
	font-size: 13px;
}

h2.comm-latest {
	font-size: 18px; 
	text-transform: uppercase; 
	font-weight: 700; 
	color: #a8b6b9;
	padding-top: 30px;
	margin-bottom: 0;
}

.comm-filters a {
	color: #a8b6b9;
}

.comm-filters a.active, 
.comm-filters a:hover {
	color: #5fab32;
	text-decoration: none;
}

.comm-filters .break {
	display: inline-block;
	margin: 0 10px;
	color: #a8b6b9;
}

.comm-featured-image {
	margin-top: 0px;
	margin-bottom: 30px;
} 

.comm-featured-image {
	position: relative;
	overflow: hidden;
	text-align: center;
	max-height: 547px;
}

.community-postback {
	margin: 10px 0;
	padding: 30px 0 25px;
	border-top: 1px solid #9eadb0;
	border-bottom: 1px solid #9eadb0;
}

.community-postback, .community-postback *  {
	font-family: 'Open Sans' !important;
}

.community-postback h2 {
	text-transform: uppercase;
	color: green;
	font-size: 24px;
	line-height: 34px;
	font-weight: 600;
	margin: 0 0 5px;
}

.community-postback .post-now-btn {
	display: block;
	background: grey;
	color: green;
	padding: 10px 20px;
	margin: 20px 0 0;
}

.ej-elephantnow .post-meta:after {
	content: " ";
	display: block;
	width: 0;
	height: 0;
	float: none;
	clear: both;
}

.ej-elephantnow .post-meta {
	border-bottom: 1px solid #CDCDCD;
	color: #CDCDCD;
	margin: 5px 0 30px; 
	padding-bottom: 10px;
}

.ej-elephantnow .post-meta span {
	display: inline-block;
	margin-right: 35px;
	font-size: 11px;
	line-height: 20px;
	color: #5fab32;
	vertical-align: middle;
}

.ej-elephantnow .post-meta span a {
	color: #63696a;
}

.ej-elephantnow .post-meta span:before {
	content: " ";
	display: inline-block;
	margin-right: 5px;
	height: 17px;
	width: 17px;
	line-height: 15px;
	vertical-align: top;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
	color: #CDCDCD;
}

.ej-elephantnow.single .post-meta span:before {
	height: 19px;
	width: 19px;
}

.ej-elephantnow .post-meta span.comment-meta,
.ej-elephantnow .post-meta span.reads-meta,
.ej-elephantnow .post-meta span.date {
	color: #a8b6b9;	
}

.ej-elephantnow .post-meta span.date:before {
	display: none;
}

.ej-elephantnow .post-meta span.author-meta:before {
	background-image: url('../images/gr-now-icon-color.png');
}

.ej-elephantnow .post-meta span.comment-meta:before {
	background-image: url('../images/gr-comments-icon.png');
}

.ej-elephantnow .post-meta span.reads-meta:before {
	height: 21px;
	width: 21px;
	position: relative;
	background-image: url('../images/gr-reads-icon.png');
}

.ej-elephantnow .post-meta span * {
	color: #CDCDCD;
}

/* Hide wysiwyg elements */
#ej-community .mce-menubtn,
#ej-community .mce-toolbar.mce-last,
#ej-community div[aria-label="Bulleted list"],
#ej-community div[aria-label="Numbered list"],
#ej-community div[aria-label="Blockquote"],
#ej-community div[aria-label="Align left"],
#ej-community div[aria-label="Align center"],
#ej-community div[aria-label="Align right"],
#ej-community div[aria-label="Remove link"],
#ej-community div[aria-label="Fullscreen"],
#ej-community div[aria-label="Toolbar Toggle"] {
	display: none;
}

.compost-loop .compost {
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid #CDCDCD;
	transition: 500ms;
}

.compost-loop .compost:hover {
	cursor: pointer;
}

.compost-loop .compost:hover .compost-copy h3 {
	color: #2f3435;
}

.compost-loop .compost:hover .compost-copy p {
	color: #000;
}

.compost-loop .compost:last-child {
	border-bottom: 0;
}

.compost-loop .post-meta {
	border-bottom: 0;
	margin-bottom: 0;
}

.compost-loop .compost:after {
	content: " ";
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
	clear: both;
	float: none;
}

.compost-loop .compost .compost-thumb {
	width: 90px;
	margin-top: 5px;
}

.compost-loop .compost .compost-copy.withumb {
	width: calc(100% - 90px);
	float: right;
}

.compost-copy h3 {
	font-size: 18px; 
	font-weight: 700; 
	color: #646768; 
	margin-bottom: 3px;
}

.compost:hover h3 {
	color: #2f3435; 
}

.compost-loop .compost img.wp-post-image {
	width: 70px !important;
	height: 70px !important;
	display: inline-block;
	margin: 0 20px 10px 0;
	float: left;
}

.compost-loop .compost.nowplus {
	background: #FFFEF5;
}

.compost-loop .compost.nowplus h3,
.ej-elephantnow .compost-loop .compost.nowplus .reads-meta {
	color: #5fab32;
}

.ej-elephantnow .compost-loop .compost.nowplus .reads-meta {
	font-weight: 600;
}

.ej-elephantnow .compost.nowplus span.reads-meta:before {
	background-image: url('../images/gr-reads-icon-green.png');
}

#ej-community .gform_footer.form-submitted {
	position: relative;
}

#ej-community .gform_footer.form-submitted:after {
    width: 20px;
    height: 20px; 
    margin:50px auto;
    -webkit-animation: fa-spin 1s infinite linear;
    animation: fa-spin 1s infinite linear;
    content: "\f110";
    font-family: FontAwesome;
    font-size:20px;
    position: absolute;
    top: -20px; 
	left: 25%;
}

.user-compost-list h2 {
	margin-top: 30px;
}

.my-account-wrapper .info-wrapper .user-compost-list h3 {
	margin-top: 0;
}

.user-compost-list .compost-edit {
	width: 93%;
	float: right;
}

.user-compost-list .delete-compost {
	display: inline-block;
	float: left;
	width: 6%;
	text-align: center;
	margin-top: 40px;
	color: rgba(200,200,200,0.4);
	transition: 250ms;
}

.user-compost-list .delete-compost:hover {
	color: rgba(200,200,200,0.9);
	transition: 250ms;
}

.user-compost-list .delete-compost:before {
	content: "\f014";
	font-family: "FontAwesome";
	font-size: 20px;
}

.user-compost-list .delete-compost.loading {
    -webkit-animation: fa-spin 1s infinite linear;
    animation: fa-spin 1s infinite linear;
}

.user-compost-list .delete-compost.loading:before {
    content: "\f110";
}

body.community-landing .body.page > h1.title {
	display: none;
}

#ej-community .ginput_container_checkbox li {
	width: 100%;
	float: none;
}

#ej-community label.gfield_label {
	margin-top: 15px;
}

#ej-community li.hide-label label .gfield_required {
	display: none !important;
}

.content-wrap .community-meta {
	margin-top: 40px;
}

.community-meta .comm-views.shares {
	width: 100%;
	float: none;
}

.comm-views span.number-views {
	display: inline-block;
	line-height: 40px;
	font-size: 12px;
	font-weight: 600;
}

.homepage-community-posts li {
	float: left;
}

.homepage-community-posts .image-wrap {
	height: 128px; 
	width: 100%; 
	vertical-align: bottom; 
	display: inline-block; 
	overflow: hidden; 
	padding: 0; 
	background-size: cover; 
	background-position: top center;
	color: #5fab32;
}

div.posts ul li.nowpost.default-image div.image {
	background-color: #eff3f4;
	filter: grayscale(100%);
}

div.posts ul li.nowpost.default-image div.image:hover {
	filter: grayscale(0%);
}

div.posts ul li.nowpost a:hover h3, 
div.posts ul li.nowpost a:hover,
div.posts ul li.nowpost .views p span {
	color: #5fab32;
}

.homepage-community-posts .image-wrap img {
	vertical-align: top; 
	visibility: hidden;
}

.comm-mobile {
	display: none;
}

.comm-featured-image img.featured-bg,
.compost-loop .compost .comm-featured-image img.featured-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: auto;
	z-index: 1;
	opacity: 0.4;
} 

.comm-featured-image img.featured-fg, 
.compost-loop .compost .comm-featured-image img.featured-fg {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: 100% !important;
	max-height:  547px;
} 

.now-page-wrapper {
	padding: 50px 0 0;
}

.now-page-wrapper .search-form {
	margin-top: 0;
}

.community-single img {
	max-width: 100%;
}

.community-landing .community-single .content-wrap h3.entryline {
	font-family: "Open sans"; 
	font-weight: 300; 
	font-size: 38px; 
	line-height: 38px;
	padding-top: 15px;
}

.community-landing .community-single .content-wrap p {
	font-size: 15px; 
	line-height: 24px; 
	font-weight: 400; 
	padding-top: 10px;
}

.community-landing .community-single .content-wrap p.postlink {
	font-family: "Open sans"; 
	font-weight: bold; 
	color: #71b34b; 
	font-size: 24px; 
	text-transform: uppercase; 
	padding-top: 40px;
}

.my-account-wrapper .info-wrapper .user-compost-list h3 {
	text-transform: none;
}

.dropout-icon {
	position: absolute;
	bottom: -1px;
	right: 0px;
	display: block;
	width: 30px;
	height: 30px;
	background-size: 75%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgba(255,255,255,0.9);
}

div.posts ul li.nowpost:nth-child(5n+1) {
	clear: left;
}

.compost-loop.loading {
	position: relative;
}

.compost-loop.loading:before {
	display: block;
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 99;
	background: rgba(255,255,255,0.8);
}

.comm-load-more {
	display: block;
	font-family: Open Sans;
	font-weight: bold;
	text-align: center;
	font-size: 15px;
	padding: 10px;
	margin: 30px auto;
	background-color: #f7931e;
	color: #ffffff;
	text-transform: uppercase;
}

.comm-load-more:hover {
	color: #FFF;
}

.comm-load-bar {
  position: relative;
  margin-top: 5px;
  width: 100%;
  height: 6px;
  margin-bottom: 15px;
  background-color: #CDCDCD;
}
.comm-load-bar .bar {
	display: none;
}

.comm-load-bar.loading .bar {
  content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 50%;
  text-align: center;
}
.comm-load-bar .bar:nth-child(1) {
  background-color: #5fab32;
  animation: loading 2s linear infinite;
}
@keyframes loading {
    from {left: 50%; width: 0;z-index:100;}
/*    33.3333% {left: 0; width: 100%;z-index: 10;}
*/    to {left: 0; width: 100%;}
}