/* styles-main.css */

/* CSS Reset */
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, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

html {
  -webkit-text-size-adjust: 100%; 
  /* Prevent font scaling in landscape while allowing user zoom */
}

*  {
  box-sizing: border-box;   
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

body  {
  background-color: #fff;
  color: #333;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  margin: 0;
  overflow-y: scroll;
}

/* Preload images */
body:after {
 display: none;
 content: url(https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1951/form-card-v2.jpg)
/* Image of a young boy and his dog in a Red Cross facility */
}

img {
  height: auto;
  max-width: 100%;
}

sup {
  font-size: .5rem;
  vertical-align: super;
}

.red {
  color: #ee0000;
}

.bold {
  font-weight: 600;
}

a {
  color: #ee0000;
}

a:hover {
  color: #be0000;
  text-decoration: underline;
}

.text-uppercase {
  text-transform: uppercase;
}

/* //// COLORS //// */
/* red: #ee0000; /
/* red-hover: #be0000; */
/* white: #fff; */
/* black: #333; */
/* light grey: #c0c0c0; */
/* accessible light grey text: #767676; */

/* //////////////////////////////// */
/* //// Mobile / Desktop Styles /// */
/* //////////////////////////////// */

.show {
  display: block;
}   

.hide {
  display: none;
}

.mobile-only {
  display: block;
}

.desktop-only,
.text-for-image.desktop-only {
  display: none;
  /* important! screws up portal pages that uses diff copy on image on slide 1 */
}

@media only screen and (min-width: 1024px) {
  .mobile-only {
    display: none;
    /* important! screws up portal pages that uses diff copy on image on slide 1 */
  }

  .desktop-only,
  .text-for-image.desktop-only {
    display: block;
    /* important! screws up portal pages that uses diff copy on image on slide 1 */
  }
}

/* ////////////////////////////// */
/* ///// Typography Styles ////// */
/* ////////////////////////////// */
.h1, 
.h2, 
.h3, 
.h4, 
.h5, 
.h6 {
  line-height: 1.5; 
  margin: .5em 0;
}

.h1, 
.h2, 
.h3, 
.h4 {
  font-weight: 600;
}

.h1 {
  font-size: 1.25rem;
  line-height: 1.25; 
  /*20px*/
}

@media only screen and (min-width: 500px) {
  .h1 {
    font-size: 1.825rem;
    line-height: 1.25; 
    /*29px*/
  }
}

.h2 {
  font-size: 1.25rem;
  /*20px*/
}

.h3 {
  font-size: 1.125rem;
  /*18px*/
}

.h4 {
  font-size: 1rem;
  margin: .25em 0;
  /*16px*/
}

.h5 {
  font-size: .935rem;
  /*15px*/
}

.h6 {
  font-size: .875rem;
  /*14px*/
}

p {
  font-size: 1rem;
  margin: 1em 0;
}

@media only screen and (min-width: 768px) {
  .h1 {
    font-size: 2.5rem;
    /*40px*/
  }

  .h2 {
    font-size: 1.5rem;
    /*24px*/
  }

  .h3 {
    font-size: 1.25rem;
    /*20px*/
  }

  .h4 {
    font-size: 1.125rem;
    /*18px*/
  }

  .h5 {
    font-size: 1rem;
    /*16px*/
  }

  .h6 {
    font-size: .875rem;
    /*14px*/
  }

  a[href^="tel:"] {
    pointer-events: none;
    text-decoration: none;
  }
}

/* ////////////////////////////// */
/* //// Page Container Styles /// */
/* ////////////////////////////// */
.page-container {
  padding: 0;
}

form { 
  margin: 0 auto; 
  max-width: 1200px;
  overflow: hidden;  
  text-align: center;    
}  

@media only screen and (min-width: 1024px){   
  form {
    text-align: left;
  }
}

/* ////////////////////////////// */
/* /////// Header Styles //////// */
/* ////////////////////////////// */
header {
  background-color: #fff;
  border-bottom: 2px solid #ee0000;
  margin: 0;
  padding: .75em 1em;
  position: relative; 
  z-index:1;
}

.logo, 
.language-toggle {
  display: inline-block;
}

.logo a {
  display: block;
  line-height: 0;
}

.header-container {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: space-between;
  max-width: 1200px; 
  overflow: hidden; 
  position: relative;        
}

.header-container svg {
  height: 37px;
  max-width: 150px;
  width: 125px;
}

.language-toggle {
  align-self: flex-end;
  font-size: .75rem;
  margin-bottom: .5em;
}

@media only screen and (min-width: 450px) {
  .header-container svg {
    height: 45px;
    max-width: 150px;
    width: 150px;
  }

  .language-toggle {
    font-size: .875rem;
  }
}

@media only screen and (min-width: 768px) {
  header {
    padding: 1em;
  } 
}

@media only screen and (min-width: 1024px) {
  header {
    padding: 1em 2em;
  }

  .header-container {
    margin: 0 auto;
    padding: 0 1em;
  }
}

@media only screen and (min-width: 1266px) {
  .header-container {
     padding: 0 2em;
  }
}

/* ////////////////////////////////// */
/* // Form Progress Bar Container  //*/
/* ///////////////////////////////// */
@media only screen and (max-width: 1023px) {
  .en__component--row--1:nth-of-type(3) {
    margin: auto;
    max-width: 620px;  
    text-align: left;
  }
  .en__component--advrow {
    max-width: 600px;
    text-align: left;
  }
}

.en__component--row--1 .en__component--copyblock.progress-bar-container {
  margin: 1em;
}

.progress-bar-container .h1 {
  font-size: 1.375rem;
  /* ^ 22px */
}

.en__component--row.en__component--row--1:nth-of-type(3n) {
  background-color: #fff;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .en__component--row--1 .en__component--copyblock.progress-bar-container {
    margin: 1.5em;
  }

  .progress-bar-container .h1 {
    font-size: 2.5rem;
    /* ^ 40px */
  }
}

@media only screen and (min-width: 1024px) {
  .en__component--row--1 .en__component--copyblock.progress-bar-container {
    margin: 2em;
  }

  .en__component--row.en__component--row--1:nth-of-type(3n) {
    width: 50%;
  }
}

/* ///////////////////////////////// */
/* // Progress Bar Icons and Text // */
/* ///////////////////////////////// */
.progress-bar {
  margin-bottom: 2em;
}

.progress-bar ul {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  list-style-type: none;
  padding: 0;
}

.progress-step {
  border-bottom: 5px solid #ccc;
  display: inline-block;
  flex-grow: 0;
  flex-basis: 33.33%;
  padding-bottom: .5em;
  text-align: center;
}

.progress-step svg {
  color: #767676;
  display: block;
  font-size: 1.3125rem;
  /* 21px */
  height: 1.1875rem;
  margin: 0 auto .25em;
  text-align: center;
  width: 1.1875rem;
}

.progress-step.active,
.progress-step.completed {
  border-bottom: 5px solid #ee0000;
}

.progress-step a {
  color: #767676;
  display: block;
  font-size: .75rem;
  /* 12px */
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
}

.progress-step a:hover {
  color: #ee0000;
  text-decoration: underline;
}

.progress-step a:hover svg * {
  fill: #ee0000;
}

@media only screen and (min-width: 768px) {
  .progress-step a {
    font-size: .875rem;
    /* 14px */
  }
}

@media only screen and (min-width: 1024px) {
  .progress-step a {
    font-size: .8125rem;
    /* 13px */
  }
}

@media only screen and (min-width: 1200px) {
  .progress-step a {
    font-size: .875rem;
    /* 14px */
  }
}

.progress-step.active a,
.progress-step.active svg {
  color: #ee0000;
  font-weight: 700;
}

.progress-step.completed a,
.progress-step.completed svg {
  color: #333;
}

/* ////////////////////////////// */
/* ///////// Step(s) //////////// */
/* ////////////////////////////// */
.step {
  display: inline-block;
  font-size: 1rem;
  left: 0%;
  padding: 0 1em 1em;
  position: relative !important;
  vertical-align: top;
  white-space: normal;
  width: 100% !important;
}

@media only screen and (min-width: 1024px) {
  .step {
    padding: 0 2em 2em;
  }
}

.step-2 .en__component--copyblock:last-of-type,
.step-3 .en__component--copyblock:last-of-type {
  display: inline;
}

.en__field--paymenttype,
.en__field--dirgift {
  display: none;
}

.hidden-step {
  height: 0;
  visibility: hidden;
}

/* ////////////////////////////// */
/* /// General Form Styles ////// */
/* ////////////////////////////// */

/* Form Label Styles */
.en__field .en__field__label {
  font-weight: 600;
  margin-bottom: .125em;
  padding: 0;
  width: 100%;
}

/* Form Injected Label Styles */
.en__field .en__field__label .added-label {
  left: inherit;
  position: absolute;
  top: -24px;
}

.en__field .en__field__label .added-label.added-label-small {
  font-size: 14px;
}

.en__field--phoneNumber {
  position: relative;
}

.en__field.en__field--phoneNumber > label.en__field__label {
  left: 0;
  position: absolute;
  top: 0;
  width: auto;
}

/* Split Phone Number with Ext */
.en__field--splittext.en__field--phoneNumber .en__field__item:nth-of-type(1) {
  width: calc(70% - .75em);
}

.en__field--splittext.en__field--phoneNumber .en__field__item:nth-of-type(2) {
  width: calc(30% - .75em);
}

/* Form Field Styles */
.en__component--formblock .en__field {
  position: relative;
  margin: 0;
}

.en__field__element {
  width: 100%;
}

.en__field__element .en__field__item {
  padding: 0;
  width: 100%;
}

.en__field__element .en__field__input--text, 
.en__field__element .en__field__input--email, 
.en__field__element .en__field__input--number, 
.en__field__element .en__field__input--telephone, 
.en__field__element .en__field__input--textarea, 
.en__field__element .en__field__input--select, 
.en__field__element .en__field__input--splitselect, 
.en__field__element .en__field__input--splittext, 
.en__field__element .en__field__input--password, 
.en__field__element .en__field__input--calendar, 
.en__field__element .en__field__input--tripletext, 
.en__field__element .en__field__input--tripleselect, 
.en__field__element .en__field__input--other {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 3px;
  border: 1px solid #c0c0c0;
  font-size: 1rem;
  outline: none;
  padding: 10px;
  transition: all 240ms ease-in-out 10ms;
  width: 100%;
}

.en__field__input--select {
  min-width: 0 !important;
}

/* ////////////////////////////// */
/* Custom Amount Radio Buttons */
/* ////////////////////////////// */
.custom-radio-buttons .en__field--checkbox {
  margin: 0;
}

.custom-radio-buttons .en__field--withOther {
  margin: 0 -.5em;
}

.en__field__element--radio .en__field__item.en__field__item--hidden {
  display: block;
}

/* "Other" Button, Left of Donation Amount Input Field */
.custom-radio-buttons .en__field--radio .en__field__element--radio .en__field__item:nth-of-type(4){
  margin-right: 0;
}

/* "Other" Donation Amount Input Field, Right of "Other" Button */
.custom-radio-buttons .en__field--radio .en__field__element--radio .en__field__item--other {
  margin-left: 0;
}

.en__field--withOther .en__field__element--radio .en__field__item--other::before {
  content: '$';
  color: #333;
  font-size: 1.25rem;
  font-weight: 400;
  position: absolute;
  top: 17px;
  left: 5px;
  z-index: 20;
}

.en__field--withOther .en__field__element--radio .en__field__item--other input {
  /* The input field on Other */
  background-color: #ddd;
  border: 1px solid #333;
  border-radius: 8px;
  color: #333;
  font-family: 'Open Sans', Arial;
  font-size: 1.125rem;
  font-weight: 600;
  height: 100%;
  margin: 0;
  padding: 0 5px 0 20px;
  position: relative;
  text-align: left;
  width: 100%;
}

.en__field--withOther .en__field__element--radio .en__field__item--other input,
.en__field--withOther .en__field__element--radio .en__field__item--other input:hover,
.en__field--withOther .en__field__element--radio .en__field__item--other input:-webkit-autofill,
.en__field--withOther .en__field__element--radio .en__field__item--other input:focus {
  background-color: #ddd;
  color: #333;
}

.en__field__input:hover,
.en__field__input:focus {
  border: 1px solid #333;
}

.en__field__input:focus {
  background-color: #f9f9f9;
}

.custom-radio-buttons .en__field--radio > label {
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.custom-radio-buttons .en__field--radio .en__field__element--radio .en__field__item {
  float: left;
  height: 60px;
  margin: .5em 0;
  position: relative;
}

.custom-radio-buttons .en__field--withOther .en__field__element--radio .en__field__item {
  margin: .5em;
  width: 44%;
  width: -webkit-calc(50% - 1em);
  width: calc(50% - 1em);
}

.custom-radio-buttons .en__field--withOther .en__field__element--radio .en__field__item.en__field__item--other {
  width: calc(100% - 1em);
}

.custom-radio-buttons .en__field--othamt1 {
  padding: 0 0 2em;
}

.en__field--withOther .en__field__element--radio .en__field__item--other input:focus{
  background-color: #fff;
}

@media only screen and (min-width: 768px) {
  .custom-radio-buttons .en__field,
  .custom-radio-buttons .en__field--checkbox {
    margin: 0;
  }

  .custom-radio-buttons .en__field.en__field--radio {
    margin: 0 -.5em;
  }

  .custom-radio-buttons .en__field--radio .en__field__element--radio .en__field__item { 
    margin: 0 .5em;
  }

  .custom-radio-buttons .en__field--radio .en__field__element--radio .en__field__item--other {
    margin-left: 0;
  }

  .custom-radio-buttons .en__field__item:nth-of-type(4) input[type="radio"] + .en__field__label {
    border-radius: 8px 0 0 8px;
    border-right: 1px solid transparent;
  }

  .en__field--withOther .en__field__element--radio .en__field__item--other input {
  /* The input field on Other */ 
    border-radius: 0 8px 8px 0;
  }

  .custom-radio-buttons .en__field__element--radio {
  /* Recurring Gift, Select Amount */
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
  }

  .custom-radio-buttons .en__field--withOther .en__field__element--radio .en__field__item {
    width: 25%;
  }

  .custom-radio-buttons .en__field--withOther .en__field__element--radio .en__field__item.en__field__item--other {
    left: 0;
    width: auto;
  }

  .custom-radio-buttons  .en__field__element--radio .en__field__item {
    width: 50%;
  }
}

.custom-radio-buttons  .en__field__element--radio .en__field__item {
  width: 100%;
}

.custom-radio-buttons .en__field__element--radio .en__field__item label {
  width: 100%;
}

.en__field--checkbox > label {
  font-size: 1.125rem;
}


/* Overrides on custom radio button style */
.custom-radio-buttons input[type="radio"] + .en__field__label:before,
.custom-radio-buttons input[type="radio"]:checked + .en__field__label:before {
  background-color: transparent;
  box-shadow: none;
  border: none;
  margin: 0;
  width: 0;
}

.custom-radio-buttons input[type="radio"],
.custom-radio-buttons input[type="radio"] + label {
  bottom: 0;
  display: block;
  left: 0;
  margin-bottom: 0;
  position: absolute; 
  right: 0;
  top: 0;
  transition: all 240ms ease-in-out 10ms;
}

.custom-radio-buttons input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

.custom-radio-buttons input[type="radio"] + .en__field__label {
  border-radius: 8px;
  border: 1px solid #333;
  color: #333;
  cursor: pointer;
  font-size: 1.125rem;
  /* 18px */
  font-weight: 600;
  padding-top: 16px;
  text-align: center;
  transition: all 240ms ease-in-out 10ms;
}

.custom-radio-buttons input[type="radio"] + .en__field__label:hover {
  background-color: #ddd;
}

.custom-radio-buttons input[type="radio"]:checked + .en__field__label {
  background-color: #ee0000;
  border: 1px solid #ee0000;
  color: #fff;
  text-align: center;
  text-decoration: underline;
}

.custom-radio-buttons input[type="radio"]:checked + .en__field__label:hover {
  background-color: #ee0000;
}

/* ^ Cover up "Other" select box arrow down */
@media only screen and (min-width: 768px) {
  /* Country + Province on one line */
  .en__field--country {
    display: inline-block;
    float: left;
    width: 49%;
    width: calc(50% - .75em);
  }

  .en__field--region {
    display: inline-block;
    float: right;
    width: 49%;
    width: calc(50% - .75em);
  }

  .en__field--region .en__field__element--select .en__field__item {
    position: relative;
    z-index: 2;
  }
  /* ^ Move "Other" input above select box */

  .en__field--region .en__field__element--select .en__field__item--other.en__field__item {
    left: 0;
    position: absolute;
    top: 25px;
    z-index: 5;
  }

  .en__field__item.hidden-field {
    visibility: hidden;
  }

  .en__field--postcode {
    clear: left;
  }
}


/* Form Field Select Option Styles */
select {
  appearance: none;
  -moz-appearance:none;
  -webkit-appearance: none;
  position: relative;
}

select::-ms-expand {
    display: none;
} 

.en__field--splitselect .en__field__element--splitselect {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.en__field__element--splitselect .en__field__item {
  position: relative;
}

.en__field__element--splitselect label {
  font-size: 13px;
}

.en__field__element--splitselect .en__field__item:nth-of-type(1),
.en__field--splittext .en__field__item:nth-of-type(1) {
  margin-right: 1em;
}

/* Country+Province / Month+Year selects */
.en__field__element--select::after,
.en__field__element--splitselect .en__field__item::after {
  color: #333;
  content: "\f078";
  font-family: FontAwesome;
  pointer-events: none;
  position: absolute;
  right: 16px;
  top: 34px;
  z-index: 2;
}

.custom-radio-buttons .en__field.en__field--ccvv {
  margin-bottom: 2em;
  width: 100%;
}

.en__field--ccvv .en__field__element input {
  width: calc(50% - 1em);
}

.en__field__element--select .en__field__item--other .en__field__input--other {
  margin: 0;
}
.en__field__element--select .en__field__item--other .en__field__input--other::focus {
  background-color: #fff;
}

/* /////////////////////////////////// */
/* // Credit Card  + PayPal buttons // */
/* /////////////////////////////////// */
.payment-type-wrapper .en__field__element--radio {
  display: flex;
}

.payment-type-wrapper .en__component--formblock .en__field {
  margin: 0 -.5em;
  padding-bottom: 18px;
}

.payment-type-wrapper .custom-radio-buttons .en__field--radio .en__field__element--radio .en__field__item {
  margin: .5em;
}

/* ////////////////////////////// */
/* // Credit Card Icon Styles /// */
/* ////////////////////////////// */
.en__component.credit-card-icons-wrapper {
  position: absolute;
}

.payment-type-wrapper.no-buttons + .credit-card-icons-wrapper {
  top: 155px;
}

.payment-type-wrapper.show-buttons + .credit-card-icons-wrapper {
  top: 250px;
}

@media only screen and (min-width: 768px) {
  /* Place them under the CC field for mobile visibility */
  .payment-type-wrapper.no-buttons + .credit-card-icons-wrapper {
    top: 145px;
  }
  .payment-type-wrapper.show-buttons + .credit-card-icons-wrapper {
    top: 242px;
  }
}

.en__component--formblock .en__field.en__field--ccnumber {
  padding-bottom: 60px;
  margin-bottom: 10px;
}

.credit-card-container {
  margin-top: 0;
  padding: 5px 0 0 80px
}

.credit-card-container h3 { 
  left: 0;
  font-size: .825rem;
  margin: 0;
  position: absolute;
  top: 12px; 
}

.credit-card-container.en-hidden {
  display: none;
}

.credit-card-container img {
  display: inline-block;
  height: auto;
  margin-right: 1em;
  width: 50px;
}

.credit-card-container img.hide {
  display: none;
}

@media only screen and (min-width: 450px) {
  .credit-card-container h3 { 
    display: inline-block;
  }
}

/* Split CC Expiry */
.en__field--ccexpire .en__field__element--splitselect {
  margin: 0;
}

/* CCVV */
.en__field--ccvv label {
  padding-bottom: 20px;
  width: 100%;
}

.en__field--ccvv label::after {
  content: 'The 3-4 digit security code on your card';
  display: block;
  font-size: .825rem;
  font-weight: 400;
}

/* ////////////////////////////// */
/* // Form Field Error Styles /// */
/* ////////////////////////////// */
.en__field__error {
  bottom: -0.125em;
  color: #ee0000;
  font-size: .75rem;
  /* 12px */
  left: 0;
  position: absolute;
}

.en__field__error + label + .en__field__element input {
  background-color: #fef4f4;
  border: 1px solid #ee0000;
  margin-left: 0;
  margin-top: 0;
}

.en__field__error + label + .en__field__element input:focus {
  background-color: #fff;
  border: 1px solid #333;
}

.en__field__error::before {
  color: #ee0000;
  content:"\f071";
  font-family: FontAwesome;
  padding-right: 5px;
}

.custom-radio-buttons .en__field--withOther > .en__field__error {
  bottom: 16px;
  left: 10px;
}

.custom-radio-buttons .en__field--withOther.en__field--othamt2 {
  padding-bottom: 40px;
}

@media only screen and (min-width: 768px) {
  .en__field__error {
    bottom: -2px;
    font-size: .825rem;
  }
}

/* ////////////////////////////// */
/* /// Payment Error Styles ///// */
/* ////////////////////////////// */
form .en__error {
  font-size: .8125rem;
  /* 13px */
  list-style-type: none;
  padding-left: 25px;
  text-align: left;
  text-indent: -25px;
  margin: 1em;
}

form .en__error::before {
  color: #ee0000;
  content:"\f071";
  font-family: FontAwesome;
  padding-right: 11px;
}

.en__errorList.error-desktop {
  display: none;
}

.en__errorList.error-mobile {
  display: block;
}

.en__errorList.error-mobile .en__error {
  background-color: rgba(255,255,255,0.7);
  color: #000;
  display: inline-block;
  margin: 0;
  padding: 1em 1em 1em 3em;
  width: 100%;
}

@media only screen and (min-width: 1024px) {
  form .en__errorList {
    width: 50%;
  }

  .en__errorList.error-desktop {
    display: inline-block;
  }

  .en__errorList.error-mobile {
    display: none;
  }
  
  form .en__error {
    margin: 2em 3em 1em;
  }
}

/* ////////////////////////////// */
/* //////// Custom Radio //////// */
/* ////////////////////////////// */
input[type="radio"] {
  position: absolute;
  opacity: 0;
}

input[type="radio"] + label {
  font-size: .875rem;
  font-weight: 400;
}

input[type="radio"] + label:before {
  background: #fff;
  border-radius: 100%;
  border: 1px solid #333;
  content: '';
  cursor: pointer;
  display: inline-block;
  height: 13px;
  margin-right: 6px; 
  position: relative;
  text-align: center;
  top: 3px;
  transition: all 240ms ease-in-out 10ms;
  vertical-align: top;
  width: 13px;
}

input[type="radio"]:checked + label:before {
  background-color: #fff;
  box-shadow: inset 0 0 0 4px #ee0000;
  border: 1px solid #ee0000;
}

input[type="radio"]:focus + label:before {
  outline: none;
  border-color: #ee0000;
}

input[type="radio"]:disabled + label:before {
  box-shadow: inset 0 0 0 5px #c0c0c0;
  border-color: #c0c0c0;
  background: #c0c0c0;   
}

input[type="radio"]:disabled + label:empty:before {
  margin-right: 0;
}

/* ////////////////////////////// */
/* ///// Custom Checkbox //////// */
/* ////////////////////////////// */
input[type='checkbox'] {
  opacity: 0; 
  /* hide it */
  position: absolute; 
  /* take it out of document flow */
}

.en__field input[type='checkbox'] + .en__field__label {
  cursor: pointer;
  font-size: .875rem;
  /* 14px */
  font-weight: 400;
  margin-top: .5em;
  padding: 0;
  position: relative; 
  padding-left: 25px;
  text-indent: -25px;
}

input[type='checkbox'] + label:before {
  background: #fff;
  border: 1px solid #333;
  border-radius: 3px;
  content: '';
  display: inline-block;
  height: 16px;
  margin-right: 7px;
  margin-top: 2px;
  transition: all 240ms ease-in-out 10ms;
  vertical-align: text-top;
  width: 16px;
}

input[type='checkbox']:hover + label:before {
  border: 1px solid #ee0000;
}

/* Box checked */
input[type='checkbox']:checked + label:before {
  background: #fff;
}

input[type='checkbox']:checked + label:after {
  background: #ee0000;
  box-shadow: 
    2px 0 0 #ee0000,
    4px 0 0 #ee0000,
    4px -2px 0 #ee0000,
    4px -4px 0 #ee0000,
    4px -6px 0 #ee0000,
    4px -8px 0 #ee0000;
  content: '';
  height: 2px;
  left: 4px;
  position: absolute;
  top: 10px;
  transform: rotate(45deg);
  width: 2px;
}

/* Donation Amount */
.en__component--formblock .en__field--donationAmt {
  /* Hides the Donation Amount */
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.en__field--donationAmt .en__field__element input.en__field__input--text {
  border-color: transparent;
  padding: 0;
}

/* Hiding the Label */
.en__field--opt-in > label,
.en__field--dirgift > label {
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* ////////////////////////////// */
/* ///// Form Button Styles ///// */
/* ////////////////////////////// */
/* Note: "step-2 .en__submit" has "donation-summary-wrapper" on top */
.step-2 .en__submit {
  padding-bottom: 40px;
  padding-top: 20px;
}

@media(min-width: 365px) {
  .step-2 .en__submit {
    padding-bottom: 25px;
  }
}

@media(min-width: 768px) {
  .step-2 .en__submit {
    padding-top: 30px;
  }
}

.en__submit button {
  background: #ee0000;
  border: 1px solid #ee0000;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  height: 60px;
  font-family: 'Open Sans', Arial;
  font-size: 1.125rem;
  /* ^ 18px */
  font-weight: 700;
  padding: 12px 35px 12px 20px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  transition: all 240ms ease-in-out 10ms;
  vertical-align: middle;
  -webkit-text-fill-color: #fff; 
  width: 100%;
}

.en__submit button::after {
  content:"\f054";
  height: 11px;
  font-family: FontAwesome;
  font-size: .825rem;
  position: absolute;
  right: 17px;
  top: 29px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 11px;
}

.en__submit button:hover,
.en__submit button:focus {
  background: #be0000;
  border: 1px solid #be0000;
  color: #fff;
  text-decoration: underline;
}

.en__submit button.processing {
  background: #999 url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1951/loading2.gif?v=1528315630000');
  background-position: 98% 50%;
  background-repeat: no-repeat;
  background-size: 22px;
  border: 0;
  cursor: default;
  transition: unset;
}

.en__submit button.processing::after {
  content:' ';
}

@media only screen and (min-width: 768px) {
  .en__submit {
    float: right;
    max-width: 300px;
  }

  .en__submit button {
    width: auto;
  }
}

/* ////////////////////////////// */
/* ///// Donation Summary  ////// */
/* ////////////////////////////// */
.en__component.donation-summary-wrapper {
  bottom: 50px;
  position: absolute;
  left: .5em;
}

.donation-summary {
  font-size:.875rem;
  padding: 1em;
}

@media only screen and (min-width: 768px) {
  .en__component.donation-summary-wrapper {
    bottom: 103px;
    left: auto;
    right: 0;
  }
}

@media only screen and (min-width: 1024px) {
  .en__component.donation-summary-wrapper {
    bottom: 10px;
    padding-right: 1em;
    right: 0;
  }
}

/* ////////////////////////////// */
/* /////// Back link //////////// */
/* ////////////////////////////// */
.back-link {
  display: inline-block;
}

@media only screen and (min-width: 768px) {
  .step .back-link {
    left: 16px;
    position: absolute !important;
  }

  .step-2 .back-link {
    bottom: 61px;
  }

  .step-3 .back-link {
    bottom: 0;
  }
}

@media only screen and (min-width: 1024px) {
  .step .back-link {
    left: 33px;
  }

  .step-2 .back-link {
    bottom: 75px;
  }

  .step-3 .back-link {
    bottom: 52px;
  }
}

.link { 
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-size: .9375rem;
  /* 15px */
  font-weight: 600;
  font: inherit;
  outline: inherit;
  padding-left: 0;
  padding-top: 2em;
  text-decoration: underline;
}

.link:hover {
  color: #be0000;
}

.link::before {
  content: "\f053";
  font-family: FontAwesome;
  font-size: .825rem;
  font-weight: 400;
}

@media only screen and (min-width: 768px) {
  .link-container {
    display: inline-block;
    padding-top: 1.25em;
  }

  .link {
    padding: 0;
  }
}

/* ////////////////////////////// */
/* ////// Template Layout /////// */
/* ////////////////////////////// */
@media only screen and (max-width: 1023px) {
  .en__component--row {
    display: block !important;
  }

  .en__component--column {
    flex: none;
  }
} 

/* Background Image */
.en__component--row--1:nth-of-type(1) {
  background-color: #333;
  /* Have a background color if image needs to load */
  background-size: cover;
  background-position: right;
  height: 30vh;
  /* ^ Updated 12/2019 -AD */
  max-height: 100%;
  overflow: hidden;
  position: relative;
  right: 0;
  top: 0;
  width: 100%;
  z-index: -99;
}

@media only screen and (min-width: 450px) {
  .en__component--row--1:nth-of-type(1) {
    background-position: bottom;
  }
}

@media only screen and (min-width: 768px) {
  .en__component--row--1:nth-of-type(1) {
    height: 50vh;
  }
}

@media only screen and (min-width: 1024px) {
  .en__component--row--1:nth-of-type(1) {
    /* Below works for TY Page only */
    background-position: bottom right;
    height: 100%;
    max-height: inherit;
    overflow: hidden;   
    position: fixed;
    right: 0;
    top: 0;
    width: 50%;
  }
}

.en__component--row--1:nth-of-type(1) img {
  display: none;
} 

/* ////////////////////////////// */
/* /////// Text on Image //////// */
/* ////////////////////////////// */
.en__component--row--1:nth-of-type(2){
  left: 0;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}

.en__component--copyblock.text-for-image {
  color: #fff;
  text-shadow: #333 2px 2px 51px;
}

.en__component--copyblock.text-for-image p {
  line-height: 1.5;
}

.en__component--copyblock.text-for-image .h1, 
.en__component--copyblock.text-for-image .h2 {
  font-weight: 400;
}

.en__component--copyblock.text-for-image .donation-value {
  font-weight: 700;
}

@media only screen and (max-width: 767px) {
  .en__component--copyblock.text-for-image p {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
}

@media only screen and (min-width: 768px) {
  .en__component--row--1:nth-of-type(2){
    text-align: left;
  }
}

@media only screen and (min-width: 1024px) {
  .en__component--row--1:nth-of-type(2){
    left: 50%;
    margin: 0 0 0 1em;
    max-width: 45%;
    padding: 2em;
    position: fixed;
    top: 7em;
  }

  .en__component--row--1.fixed:nth-of-type(2){
    position: fixed;
    top: 0;
  }

  .en__component--row.en__component--row--1:first-of-type {
    margin-right: -1em;
    width: 50%;
  }

  .en__component--row--1 .en__component--copyblock.text-for-image {
    margin: 0;
    max-width: 460px;
  }
}

@media only screen and (min-width: 1400px) {
  .en__component--row--1:nth-of-type(2){
    margin: 0 0 0 3em;
  }
}

/* Text Left / Form */
.en__component--row.en__component--advrow {
  display: inline-block !important;
  flex: none;
  font-size: 0;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width: 100%;
}

.en__component--row--1 .en__component--copyblock {
  margin: 1.5em;
}

@media only screen and (min-width: 1024px) {
  .en__component--row.en__component--advrow {
    width: 50%;
  }

  .en__component--row--1 .en__component--copyblock {
    margin: 2em;
  }
}

/* ////////////////////////////// */
/* //// Payment Loading gif ///// */
/* ////////////////////////////// */
#loadingMessage {
  background-color: #fff;
  left: -164px;
  margin-left: 50%;
  position: absolute;
  text-align: center;
  top: 50vh;
}

/* ////////////////////////////// */
/* //// Thank You Styles //////// */
/* ////////////////////////////// */
.icon-container-wrapper {
  margin-bottom: 2em;
}

.icon-container {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  margin: 1em auto;
  text-align: left;
  width: 100%;
}

.icon-container-icon {
  display: inline-block;
  margin-bottom: 1em;
  padding-top: 10px;
  width: 40px;
}

.icon-container-text {
  display: inline-block;
  margin-left: 20px;
  width: calc(100% - 50px);
}

.icon-container p,
.single-donation-msg p,
.monthly-donation-msg p {
  margin: 0;
}

@media only screen and (min-width: 1200px) {
  .icon-container { 
    margin: 2em auto;   
  }

  .icon-container-icon {
    width: 50px;
  }
} 

/* ////////////////////////////// */
/* /// Form Footer Styles /////// */
/* ////////////////////////////// */
footer {
  border: 0;
  clear: both;
  font-size: 1rem;
  margin: 1.5em auto 0;
  max-width: 1200px;
  padding: 0 1em;
  text-align: center;
}

.footer-container {
  border-top: 1px solid #c0c0c0;
  clear: both;
  margin: 0;
  padding: 1em 0;
  width: 100%;
}

.footer-container p {
  font-size: .75rem; 
  margin: 0 0 .25em 0;
}

.footer-container .footer-contact {
  padding-top: 1em;
}

.footer-container .footer-links {
  padding-top: .5em;
}

.footer-container a {
  color: #333;
  font-weight: 700;
}

@media only screen and (min-width: 1024px) {
  footer {
    padding: 0 2em;
    text-align: left;
  }

  .footer-container {
    max-width: calc(600px - 4em);
    padding: 2em 0;
    width: 50%;
  }
}

/* styles-main.css */
/* As of Feb.27/2020 */