/************************************
 * Template: 4Site Template - Child Theme Custom
 * Project: Organic Consumers Association
 ***********************************/

/* Add a background image when the page is not embedded or in the page builder */
body:not(.embedded):not(#en__pagebuilder) {
	background: #3d834a url("../images/background/fruit-and-vegetables-seamless-green-compressor.jpg") repeat;
	background-size: 300px;
	background-position: left top;
}

html.has-image body:not(.embedded):not(#en__pagebuilder) {
	background-size: cover;
	background-repeat: no-repeat;
}

#main-content-wrapper{
	max-width: calc(840px + 4.375rem);
	font-family: 'Roboto', sans-serif !important;
}

#main-content .indented-body{
	margin: 0 4.5rem;
}

#main-content {
    padding-top: 0;
    padding-bottom: 0;
}

.header-logo,
.header-secondary-cta{
	display: flex;
	height: 88px;
	align-items: center;
}

.header-logo{
	justify-content: flex-start;	
}

#main-content .header-logo img{
	height: 57px !important;
	width: auto !important;
	display: block;
}

#main-content .header-logo a{
	cursor: default;
}

.header-secondary-cta{
	justify-content: flex-end;	
}

/* In the event paragraph text is added, remove top margin to prevent vertical mis-alignment when centering */
.header-logo .en__component:first-child p,
.header-secondary-cta .en__component:first-child p,
.banner-image .en__component:first-child p{
	margin-top: 0;
}

/* In the event paragraph text is added, remove bottom margin to prevent vertical mis-alignment when centering */
.header-logo .en__component:last-child p,
.header-secondary-cta .en__component:last-child p,
.banner-image .en__component:last-child p{
	margin-bottom: 0;
}

.header-logo img,
.header-secondary-cta img{
	display: block;
}

body:not(#en__pagebuilder) .banner-image{
	display: none;
}

.pre-footer{
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.75;
	letter-spacing: normal;
	text-align: center;
	color: #828282;
}

.footer{
	background-color: #323232;
	color: #ffffff;
	font-size: 14px;
	font-style: normal;
	font-stretch: normal;
    line-height: 1.43;
    letter-spacing: 0.6px;
	text-align: center;
	padding: 2.5rem 0;
}

.footer a{
	color: #ffffff;
}

@media (min-width: 600px){
	#main-content .recurring-payment .en__field__item{
	    min-width: 170px;
	}
}

#main-content .en__component--formblock.recurring-payment{
	flex-direction: row;
}

#main-content .donation-amount{
    flex-wrap: wrap;
}

#main-content .banner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    transition: opacity 0.3s;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 1.6em;
    padding: 2em;
}

body:not(.embedded):not(#en__pagebuilder) #main-content .banner:not(.no-image){
    background-color: #d2d2d2;
}

#main-content .banner.image-100h{
	min-height: 100px;
}

#main-content .banner.image-200h{
	min-height: 200px;
}

#main-content .banner.image-300h{
	min-height: 300px;
}

#main-content .banner.image-400h{
	min-height: 400px;
}

#main-content .banner.image-500h{
	min-height: 500px;
}

#main-content .banner.image-600h{
	min-height: 600px;
}

#main-content .banner.image-700h{
	min-height: 700px;
}

#main-content .banner.image-800h{
	min-height: 800px;
}

#main-content .banner.image-900h{
	min-height: 900px;
}

#main-content .banner.image-1000h{
	min-height: 1000px;
}

#main-content .recurring-payment{
	margin-bottom: 1.2em;
}

#main-content .body-copy{
margin-bottom: 3.2em;
}

body:not(#en__pagebuilder) #main-content .banner-image{
	position: absolute;
}

#main-content .banner-text{
	text-align: center;
	max-width: 500px;
    /* display: flex;
    flex-direction: column;	*/
}

#main-content .banner-text p{
	font-size: 26px;
	font-weight: bold;
	font-style: normal;
	font-stretch: normal;
	letter-spacing: normal;
	padding: 0 .9em;
	color: #323232;
    display: inline-block;
    box-decoration-break: clone;
    /* margin: .4em; */
}

#main-content .banner-text p:first-of-type:not(:only-child){
	padding-top: .3em;
	padding-bottom: .125em;
	margin-bottom: 0;
	/*box-shadow: 10px 0 0 red, -10px 0 0 red;*/
}

#main-content .banner-text p:last-of-type:not(:only-child){
	padding-top: .125em;	
	padding-bottom: .3em;
	margin-top: 0;
	/*box-shadow: 10px 0 0 red, -10px 0 0 red;*/
}

#main-content .banner-text.green p{
	color: #ffffff;
	display: inline;
	background-color: #0e8542;
	padding: .4em 0;
	position: relative;
	box-shadow: 1em 0 0 0 #0e8542, -1em 0 0 0 #0e8542;

}

#main-content .banner-text.red p{
	color: #ffffff;
	display: inline;
	background-color: #d7334b;
	padding: .4em 0;
	position: relative;
	box-shadow: 1em 0 0 0 #d7334b, -1em 0 0 0 #d7334b;

}

#main-content .banner-text.black p{
	color: #ffffff;
	display: inline;
	background-color: #323232;
	padding: .4em 0;
	position: relative;
	box-shadow: 1em 0 0 0 #323232, -1em 0 0 0 #323232;

}

#main-content .banner-text:first-of-type:not(:only-child){
	top: -1em;
}

#main-content .banner-text:last-of-type:not(:only-child){
	bottom: -1em;
}

#main-content .banner-text.lead p{
	font-size: 34px;
}

#main-content .en__field__label {
  font-size: 14px;
  font-weight: 500;
}



#main-content .recurring-payment.pill-buttons.radio-to-buttons .en__field__item{
	width: 170px;
}

#main-content .recurring-payment.pill-buttons.radio-to-buttons label,
#main-content .recurring-payment.pill-buttons.radio-to-buttons input[type='radio'] + label{
	/*min-width: 170px;*/
}

#main-content .pre-footer{
	display: flex;
	align-items: center;
	justify-content: center;	
}

#main-content .pre-footer .en__component{
	max-width: 410px;	
}

/* Give by card */
#main-content #en__field_supporter_questions_1801650 label{

}

/* Give by PayPal */
#main-content #en__field_supporter_questions_1801651 label{
	
}

/* Give by Check */
#main-content #en__field_supporter_questions_1801652 label{
	
}


#main-content .have-questions-call-line p{
	text-align: right;
}

#main-content .have-questions-call-line p:first-of-type{
	font-size: 14px;
	letter-spacing: 0.7px;
	font-weight: bold;
}

#main-content .have-questions-call-line p:last-of-type{
	font-size: 12px;
	letter-spacing: 0.6px;
}

#main-content .have-questions-call-line a{
	cursor: pointer;
	color: #323232;
}

#main-content .en__submit{
	width: 370px;
	max-width: 100%;
	margin: 1rem 0;
}

#main-content .en__submit button{
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	padding-bottom: .7em;
	padding-top: .7em;
	line-height: 0.8;
	letter-spacing: 1.9px;
	margin: 0 0 2em 0;
}

#main-content .red .en__submit button{
	background-color: #d7334b;
}

#main-content .arrow .en__submit button::after{
	content:"→";
	float: right;
	margin-right: 1rem;
	opacity: .9;
}

#main-content .arrow .en__submit button:disabled::after{
	display: none;
} 


#main-content .give-by-paypal{
	font-size: 14px;
	font-weight: 500;
}

.form-side-by-side #main-content-wrapper{
	max-width: 1280px;
}

/*
#main-content .en__component .en__field--city{
	flex-basis: calc(50% + .5rem);
}

#main-content .en__component .en__field--region,
#main-content .en__component .en__field--postcode{
	flex-basis: calc(25% - .25rem);
}
*/

#main-content input[type="date"],
#main-content input[type="datetime"],
#main-content input[type="datetime-local"],
#main-content input[type="email"],
#main-content input[type="month"],
#main-content input[type="number"],
#main-content input[type="password"],
#main-content input[type="range"],
#main-content input[type="search"],
#main-content input[type="tel"],
#main-content input[type="text"],
#main-content input[type="time"],
#main-content input[type="url"],
#main-content input[type="week"],
#main-content input[type="hidden"],
#main-content select,
#main-content textarea,
#main-content .radio-to-buttons label.en__field__label.en__field__label--item {
	/* border-color: #323232; */
}

#main-content #made-with-love{
	color: #d7334b;
}

#main-content img.oc-bbb-logo,
#main-content img.oc-cna-logo{
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	opacity: .5;
	display: inline-block;
}

#main-content .social-share p{
	text-align: right;
	font-size: 14px;
	letter-spacing: 0.7px;
	font-weight: bold;
}

#main-content .social-share img{
	display: inline;
	margin-left: 1em;
	height: 16px;
}

#main-content .social-share p{
	display: flex;
	align-items: center;
}

/*Override EN Default Icons */

#main-content .en__share__button {
    height: 16px;
    width: 16px;
}

#main-content .en__shares{
    align-items: center;
}

#main-content .en__shares::before {
    content: "SHARE";
    font-size: 14px;
    letter-spacing: 0.7px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    color: #323232;
    margin-right: 1rem;
}

#main-content .en__share__button--facebook {
    background-image: url(../../parent-theme/images/facebook.svg) !important;
}

#main-content .en__share__button--twitter {
    background-image: url(../../parent-theme/images/twitter.svg) !important;
}

#main-content .en__share__button--gplus {
	background-size: 16px;
}

#main-content .en__field--donationAmt.en__field.en__field--radio .en__field__item{
	min-width: 100px;
	margin-bottom: 1rem;  /*In the event the buttons wrap */

	/*
	flex-grow: 1;
	min-width: 155px;
	margin-bottom: 1rem;
	max-width: 155px;
	*/
}

#main-content .en__component .en__field.en__field--radio .en__field__item--other{
	margin-top: 0;
}

#main-content .en__field--donationAmt .en__field__item--other input {
    width: 215px;
}

/* Adjust the donation button area width area so that the intentionally wrap creating a nicer look */
#main-content .en__field--donationAmt .en__field__element--radio{
	width: 90%;
	margin: 0 auto;
}

/************************************
 * Error Messages Color
 ***********************************/

.en__errorHeader,
.en__errorList > .en__error,
#main-content .en__component .en__field__error,
#main-content .en__component .en__field__error-wrapper .en__field__error,
#main-content .en__component .en__field__error-wrapper input,
#main-content .en__component .en__field__error-wrapper select,
#main-content .en__component .en__field__error-wrapper textarea,
#main-content .en__component .en__field__error-wrapper.en__field--splittext input,
#main-content .en__component .en__field__error-wrapper.en__field--tripletext input,
#main-content .en__component .en__field__error-wrapper.en__field--splitselect select,
#main-content .en__component .en__field__error-wrapper.en__field--tripleselect input,
#main-content .en__component .en__field__error-wrapper.en__field--splittext .en__field__error,
#main-content .en__component .en__field__error-wrapper.en__field--tripletext .en__field__error,
#main-content .en__component .en__field__error-wrapper.en__field--splitselect .en__field__error,
#main-content .en__component .en__field__error-wrapper.en__field--tripleselect .en__field__error,
#main-content .en__component .en__field__error-wrapper.en__field--radio.en__field--withOther .en__field__error{
  border: 1px solid #d7334b;
}
	
#main-content .give-by-select.radio-to-buttons.dark-buttons .en__field__element--radio .en__field__item label.en__field__label.en__field__label--item:hover,
#main-content .give-by-select.radio-to-buttons.dark-buttons .en__field__element--radio .en__field__item input[type='radio']:checked + label {
    background-color: #666666;
    border-color: #666666;
}

.header-secondary-cta {
	position: absolute !important;
	top: 0;
	right: 0;
}

/************************************
 * Medium Breakpoint (Mid Resolution Device)
 * At this breakpoint, rows elements expand to take up their own row
 * A row with two input fields display 50% width will now have to rows, one for each input field, displaying 100% width
 * Inputs that are multipart (ie Spit Text) will still retain their look on a single row and are not broken up
 * REF: https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
 ***********************************/

@media only screen and (max-width: 1000px) {

	.hide-medium{
		display: none !important;	
	}

	/* Override EN Default Behavior */
	.en__component--column.en__component--advcolumn.row-breakout{
		width: auto;
	}

	/* Hide all the middle giving value */
	.donation-amount.show-hidden-input.round-buttons .en__field__item:not(:first-of-type):not(:last-of-type){
		display: none;
	}

	/* Show the second giving value */
	#main-content .donation-amount.show-hidden-input.round-buttons .en__field__item:nth-child(2){
		display: initial !important;
	}

	/* Hides long form country select */
	#main-content #en_custom_field_simple_country_select_long {
		display: none;
	}

	/* Shows short form hidden country select */
	#main-content #en_custom_field_simple_country_select_short {
		display: initial;
	}

	#main-content .indented-body{
		margin: 0 auto;
	}

	.en__component--column.en__component--advcolumn,
	.en__component--row--2 .en__component--column {
		width: 100%;
	}

  /* Form switches from row to column display format */
  /*
  #main-content .en__component--formblock:not(.en-form-lazy-layout){
    flex-direction: column;
  }
	*/

  /* Because elements are now displayed in a column, those that are centered need a new attribute */
 /*
  #main-content .en-row-center{
    align-items: center;
  }
*/
/*
  #main-content .en__component--formblock:not(.en-form-lazy-layout) .en__field:first-of-type{
    margin-right: 0rem;
  }
*/
  /* ENs page builder adds a div to the formblock DOM on hover. This will cause a small right margin to appear as the expected input fields are no longer the last of their siblings */
 /* #main-content .en__component--formblock:not(.en-form-lazy-layout) .en__field:last-of-type{
    margin-left: 0rem;
  }
*/
/*
  #main-content .en__component--formblock:not(.en-form-lazy-layout) .en__field:not(:first-of-type):not(:last-of-type){
    margin-left: 0rem;
    margin-right: 0rem;
  }  
 */
}

/* EN Defaults to making the divs blocks after 600px, we're keeping them Flexbox all the way down */

@media only screen and (max-width: 350px) {
	.social-share{
		color: transparent;
	}
}

/************************************
 * Medium Breakpoint (Mid Resolution Device)
 * At this breakpoint, rows elements expand to take up their own row
 * A row with two input fields display 50% width will now have to rows, one for each input field, displaying 100% width
 * Inputs that are multipart (ie Spit Text) will still retain their look on a single row and are not broken up
 * REF: https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
 ***********************************/

@media (max-width: 1000px){

	#main-content .banner.image-100h{
		min-height: 100px;
	}

	#main-content .banner.image-200h{
		min-height: 200px;
	}

	#main-content .banner.image-300h{
		min-height: 300px;
	}

	#main-content .banner.image-400h{
		min-height: 300px;
	}

	#main-content .banner.image-500h{
		min-height: 400px;
	}

	#main-content .banner.image-600h{
		min-height: 400px;
	}

	#main-content .banner.image-700h{
		min-height: 400px;
	}

	#main-content .banner.image-800h{
		min-height: 500px;
	}

	#main-content .banner.image-900h{
		min-height: 500px;
	}

	#main-content .banner.image-1000h{
		min-height: 500px;
	}

}

/* Force display at full width on smaller resolution devices */
@media only screen and (max-width: 1000px), only screen and (max-device-width: 1000px){
	.en__component--row.en__component--advrow{
		flex-wrap: wrap !important;
	}

	.indented-body,
	.form-body{
		flex-basis: 100% !important;
	}

}