/************************************
 * Template: 4Site Template - Child Theme Custom
 * Project: Ocean Conservancy
 ***********************************/

/* Add a background image when the page is not embedded or in the page builder */
html body:not(#en__pagebuilder) {
  background: #f3f3f3
    url("https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1991/gray_pattern-optimized.jpg?v=1527883852000")
    repeat;
  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: 52px !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 tio margin to precent 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 precent 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
  .donation-amount.radio-to-buttons.round-buttons
  .en__field__item--other {
  background-image: url(https://cdn.jsdelivr.net/gh/4site-interactive-studios/Ocean-Conservancy-Engaging-Networks-Template@master/themes/child-theme/images/other-formated.png);
  background-size: 74px 36px;
  background-position: 13px 18px;
  background-repeat: no-repeat;
}

#main-content
  .donation-amount.radio-to-buttons.round-buttons
  input.en__field__input--other {
  height: 100px;
  width: 100px;
  font-size: 34px;
  font-weight: 600;
  font-family: "Work Sans", sans-serif;
  color: #323232;
  background: none;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  /*
    background-image: url("https://cdn.jsdelivr.net/gh/4site-interactive-studios/Ocean-Conservancy-Engaging-Networks-Template@master/themes/child-theme/images/giving-other-placeholder-value.png");
	background-repeat: no-repeat;
    background-size: 32px 23px;
    background-position: 27px 39px;
    */
}

#main-content
  .donation-amount.radio-to-buttons.round-buttons
  input.en__field__input--other:focus {
  background-image: none;
}

#main-content
  .donation-amount.radio-to-buttons.round-buttons
  .has-value.en__field__item--other {
  background-image: url("https://cdn.jsdelivr.net/gh/4site-interactive-studios/Ocean-Conservancy-Engaging-Networks-Template@master/themes/child-theme/images/surprise-formated.png");
  background-color: #009bc4;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  background-size: 74px 36px;
}

#main-content
  .donation-amount.radio-to-buttons.round-buttons
  .has-value
  input.en__field__input--other {
  background-image: none;
  color: #ffffff;
}

#main-content
  .donation-amount.radio-to-buttons.round-buttons
  label.en__field__label.en__field__label--item {
  width: 68px;
  height: 68px;
  padding: 1rem;
  font-size: 34px;
  font-weight: 600;
  font-family: "Work Sans", sans-serif;
}

#main-content .donation-amount.round-buttons label:first-letter {
  font-size: 20%;
  color: #8a2be2;
}

#main-content
  .donation-amount.round-buttons
  .en__field.en__field--radio
  .en__field__item:last-of-type {
  margin-top: 0;
  margin-bottom: 0;
}

#main-content
  .donation-amount.round-buttons
  .en__field__element.en__field__element--radio {
  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 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: 0.3em;
  padding-bottom: 0.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: 0.125em;
  padding-bottom: 0.3em;
  margin-top: 0;
  /*box-shadow: 10px 0 0 red, -10px 0 0 red;*/
}

#main-content .banner-text.blue p {
  color: #ffffff;
  display: inline;
  background-color: #2ba8dd;
  padding: 0.4em 0;
  position: relative;
  box-shadow: 1em 0 0 0 #2ba8dd, -1em 0 0 0 #2ba8dd;
}

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

#main-content .banner-text.black p {
  color: #ffffff;
  display: inline;
  background-color: #323232;
  padding: 0.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: 0.7em;
  padding-top: 0.7em;
  line-height: 0.8;
  letter-spacing: 1.9px;
  margin: 0 0 2em 0;
}

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

#main-content .arrow .en__submit button::after {
  content: "→";
  float: right;
  margin-right: 1rem;
  opacity: 0.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: #1294bf;
}

#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: 0.5;
  display: inline-block;
}
#main-content img.oc-gs-logo {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  opacity: 1;
  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(https://cdn.jsdelivr.net/gh/4site-interactive-studios/Ocean-Conservancy-Engaging-Networks-Template@master/themes/parent-theme/images/facebook.svg) !important;
}

#main-content .en__share__button--twitter {
  background-image: url(https://cdn.jsdelivr.net/gh/4site-interactive-studios/Ocean-Conservancy-Engaging-Networks-Template@master/themes/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;
}

/************************************
 * 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: 960px) {
  .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;
  }

  .form-side-by-side #main-content .en__component--row.en__component--advrow {
    display: block;
  }

  /* 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;
  }  
 */
}

/************************************
 * 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: 40em) {
  #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;
  }
}

/*****************************************
 * Progress Bar Styling - Iframe + Widget
 ****************************************/
div.enWidget--progressBar div.enWidget__display,
div.enWidget--progressBar div.enWidget__bar,
div.enWidget--progressBar div.enWidget__progress,
body.progress-bar div.enWidget__display,
body.progress-bar div.enWidget__bar,
body.progress-bar div.enWidget__progress {
  min-height: 18px;
  border-radius: 18px;
}
div.enWidget--progressBar div.enWidget__fill,
body.progress-bar div.enWidget__fill {
  border: 0;
  border-radius: 18px;
}
div.enWidget--progressBar div.enWidget__copy,
body.progress-bar div.enWidget__copy {
  font-size: 18px;
  font-family: "Roboto", sans-serif;
}

/* Misc */
#main-content .en__submit {
  max-width: 370px !important;
  width: 100% !important;
}