/* This file will hold styles for the mobile version of your website (mobile first). */
/* This also can include ANY global CSS that applies site-wide. Unless overwritten by a more specific style rule, CSS declarations in global.css will apply site-wide. */
/* Reset =================================================== */
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  position: static;
  clip: auto;
  height: auto;
  width: auto;
  margin: 0;
  overflow: visible;
}
/* Page =================================================== */
html {
  font-size: 62.5%;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: #f3f5f6;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: #f0f0f0;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5em;
  color: #555;
  overflow-y: scroll;
}
/* Typography =================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Tahoma, sans-serif;
  font-weight: bold;
  color: inherit;
  text-rendering: optimizelegibility;
}
h1 small,
h2 small {
  font-weight: normal;
  color: #bfbfbf;
}
h1,
.h1 {
  color: #555;
  margin: 1em 0;
  font-size: 36px;
  font-size: 1.5em;
  line-height: 1.125em;
}
h2,
.h2 {
  margin-bottom: 0.375em;
  font-size: 36px;
  font-size: 1.5em;
  line-height: 1.5;
}
h3,
.h3 {
  margin-bottom: 0.375em;
  font-size: 24px;
  font-size: 1.325em;
  line-height: 1.5;
}
h4,
.h4 {
  margin-bottom: 0.375em;
  font-size: 18px;
  font-size: 1.125em;
  line-height: 1.5;
}
h5,
.h5 {
  font-size: 16px;
  font-size: 1em;
  margin-bottom: 1.5em;
}
h6,
.h6 {
  margin-bottom: 1.5em;
  font-size: 14px;
  font-size: 0.875em;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
}
input, select {
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
}
p,
ol,
ul,
dl,
address {
  margin-bottom: 1.562em;
  font-size: 16px;
  font-size: 1em;
  line-height: 1.562em;
}
small {
  font-size: 14px;
  font-size: 1.4rem;
}
ul,
ol {
  margin: 0 0 1.5em -24px;
  padding: 0 0 0 24px;
}
li ul,
li ol {
  margin: 0;
  font-size: 16px;
  font-size: 1.6rem;
}
blockquote {
  margin: 0 0 1.5em -24px;
  padding-left: 24px;
  border-left: 2px solid #c7ced6;
  font-family: "proxima-nova", serif;
  font-style: italic;
}
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
cite {
  font-style: normal;
}
dl,
dd {
  margin-bottom: 1.5em;
}
dt {
  font-weight: bold;
}
.dl-horizontal dt {
  float: left;
  clear: left;
  width: 20.25%;
  text-align: right;
}
.dl-horizontal dd {
  margin-left: 22.78%;
}
abbr[title] {
  border-bottom: 1px dotted #c7ced6;
  cursor: help;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
ins {
  background-color: #f3f5f6;
  color: #000000;
  text-decoration: none;
}
mark {
  background-color: #f3f5f6;
  color: #000000;
  font-style: italic;
  font-weight: bold;
}
pre,
code,
kbd,
samp {
  font-family: Monaco, Consolas, "Lucida Console", monospace;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5em;
}
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
sub,
sup {
  position: relative;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 0;
  vertical-align: baselineheight;
}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
img {
  max-width: 100%;
  border-width: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}

/* Colour =================================================== */
a {
  text-decoration: none;
  color: #0086ED;
}
a:visited {
  color: #618BBF;
}
a:hover {
  color: #44aaff;
}
a:focus {
  outline: thin dotted;
  color: #000000;
}
a:hover,
a:active {
  outline: 0;
}
::-moz-selection {
  background-color: #d6dbe1;
  color: #2d353e;
  text-shadow: none;
}
::selection {
  background-color: #d6dbe1;
  color: #2d353e;
  text-shadow: none;
}
[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.2s 0.2s linear;
  opacity: 0;
}

/* Header =================================================== */
#section-header {
  background-color: #44aaff;
  border-bottom: 3px solid #3d97e2;
  -webkit-box-shadow: rgba(0,0,0,0.2) 0 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0 1px 3px;
  -ms-box-shadow: rgba(0,0,0,0.2) 0 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0 1px 3px;
}
#section-header .branding-data {
  margin: 0.5em 0.5em 0.35em 0.5em;
}
#section-header .branding-data .logo-img {
  float: left;
  max-width: 50%;
}
#section-header .branding-data .logo-img a {
  display: block;
  margin: 0;
  padding: 0;
  vertical-align: top;
  line-height: 1;
}
/*#section-header .branding-data .logo-img a {
  background: url(../img/logo.png) no-repeat left center;
  background-size: 100% auto;
  background-position: left center;
  display: block;
  height: 2.85em;
  width: 10em;
  float: left;
}
#section-header .branding-data .logo-img a img {display: none;}*/
#section-header .branding-data .tagline-narrow h3 {
  color: #fff;
  font-size: 0.875em;
  font-weight: 300;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 0 0 10%;
  width: 25%;
  max-width: 6em;
  float: right;
  line-height: 1.125;
}
#section-header .branding-data .tagline {display: none;}
#section-header .branding-data .tagline h3 {
  color: #fff;
  font-size: 0.875em;
  font-weight: 300;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#wfp-donation-builder-form-builder {
  background: #fff;
  -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
  -ms-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
  box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
  margin-bottom: 1em;
}
.title,
.title-narrow {
  display: block;
  text-align: center;
  font-size: 1.25em;
}
.title {display: none;}


/* Donation builder navigation */
#navigation-steps {
  display: table;
  width: 100%;
  box-shadow: rgba(0,0,0,0.15) 0 1px 3px;
}
#navigation-steps .navigation-step {
  position: relative;
  width: 20%;
  display: table-cell;
  text-align: center;
  padding: 2% 0;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #555;
  text-shadow: #fff 0 1px 0;
  background-color: #fafafa;
  -webkit-box-shadow: inset #d7d7d7 0 -1px 0,
              inset #ececec 1px 0 0,
              inset rgba(255, 255, 255, 0.9) 0 1px 2px;
  -moz-box-shadow: inset #d7d7d7 0 -1px 0,
              inset #ececec 1px 0 0,
              inset rgba(255, 255, 255, 0.9) 0 1px 2px;
  box-shadow: inset #d7d7d7 0 -1px 0,
              inset #ececec 1px 0 0,
              inset rgba(255, 255, 255, 0.9) 0 1px 2px;
  z-index: 1000;
  letter-spacing: -1px;
  line-height: 1.25em;
  vertical-align: middle;
  cursor: default;
}
#navigation-steps .navigation-step.inactive {color: #bbb;}
#navigation-steps .navigation-step.inactive:hover {color: #bbb;}
#navigation-steps .navigation-step.selected {
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: inset rgba(0, 137, 252, 0.5) 0 -1px 0,
              inset #ececec 1px 0 0,
              inset #ececec -1px 0 0,
              inset rgba(255, 255, 255, 1) 0 1px 2px,
              rgba(68, 170, 255, 0.5) 0 2px 3px;
  -moz-box-shadow: inset rgba(0, 137, 252, 0.5) 0 -1px 0,
              inset #ececec 1px 0 0,
              inset #ececec -1px 0 0,
              inset rgba(255, 255, 255, 1) 0 1px 2px,
              rgba(68, 170, 255, 0.5) 0 2px 3px;
  box-shadow: inset rgba(0, 137, 252, 0.5) 0 -1px 0,
              inset #ececec 1px 0 0,
              inset #ececec -1px 0 0,
              inset rgba(255, 255, 255, 1) 0 1px 2px,
              rgba(68, 170, 255, 0.5) 0 2px 3px;
  z-index: 500;
}
#navigation-steps .navigation-step.selected:hover {color: #555;}
#navigation-steps .navigation-step:first-child {
  border-top-left-radius: 5px;
  -webkit-box-shadow: inset #d7d7d7 0 -1px 0,
              inset #ececec 0 0 0,
              inset rgba(255, 255, 255, 0.9) 0 1px 2px;
  -moz-box-shadow: inset #d7d7d7 0 -1px 0,
              inset #ececec 0 0 0,
              inset rgba(255, 255, 255, 0.9) 0 1px 2px;
  box-shadow: inset #d7d7d7 0 -1px 0,
              inset #ececec 0 0 0,
              inset rgba(255, 255, 255, 0.9) 0 1px 2px;
}
#navigation-steps .navigation-step:last-child {border-top-right-radius: 5px;}
#navigation-steps .navigation-step.selected + div {
  -webkit-box-shadow: inset #d7d7d7 0 -1px 0,
              inset #ececec 0 0 0,
              inset rgba(255, 255, 255, 0.9) 0 1px 2px;
  -moz-box-shadow: inset #d7d7d7 0 -1px 0,
              inset #ececec 0 0 0,
              inset rgba(255, 255, 255, 0.9) 0 1px 2px;
  box-shadow: inset #d7d7d7 0 -1px 0,
              inset #ececec 0 0 0,
              inset rgba(255, 255, 255, 0.9) 0 1px 2px;
}
#navigation-steps .navigation-step:hover {color: #44aaff;}
#navigation-steps .navigation-step.selected:first-child {
  -webkit-box-shadow: inset rgba(0, 137, 252, 0.5) 0 -1px 0,
              inset #ececec 0 0 0,
              inset #ececec -1px 0 0,
              inset rgba(255, 255, 255, 1) 0 1px 2px,
              rgba(68, 170, 255, 0.5) 0 2px 3px;
  -moz-box-shadow: inset rgba(0, 137, 252, 0.5) 0 -1px 0,
              inset #ececec 0 0 0,
              inset #ececec -1px 0 0,
              inset rgba(255, 255, 255, 1) 0 1px 2px,
              rgba(68, 170, 255, 0.5) 0 2px 3px;
  box-shadow: inset rgba(0, 137, 252, 0.5) 0 -1px 0,
              inset #ececec 0 0 0,
              inset #ececec -1px 0 0,
              inset rgba(255, 255, 255, 1) 0 1px 2px,
              rgba(68, 170, 255, 0.5) 0 2px 3px;
}
#navigation-steps .navigation-step.selected:last-child {
  -webkit-box-shadow: inset rgba(0, 137, 252, 0.5) 0 -1px 0,
              inset #ececec 1px 0 0,
              inset #ececec 0 0 0,
              inset rgba(255, 255, 255, 1) 0 1px 2px,
              rgba(68, 170, 255, 0.5) 0 2px 3px;
  -moz-box-shadow: inset rgba(0, 137, 252, 0.5) 0 -1px 0,
              inset #ececec 1px 0 0,
              inset #ececec 0 0 0,
              inset rgba(255, 255, 255, 1) 0 1px 2px,
              rgba(68, 170, 255, 0.5) 0 2px 3px;
  box-shadow: inset rgba(0, 137, 252, 0.5) 0 -1px 0,
              inset #ececec 1px 0 0,
              inset #ececec 0 0 0,
              inset rgba(255, 255, 255, 1) 0 1px 2px,
              rgba(68, 170, 255, 0.5) 0 2px 3px;
}
#navigation-steps .navigation-step span {display: block; font-weight: 700;}

.donation-step {
  padding: 0em 1em 0;
  font-size: 0.875em;
  line-height: 1.45em;
}

#step-country .form-item {padding: 0.5em 0; position: relative; overflow: visible;}
.form-item {
  position: relative;
  overflow: visible;
  margin-top: 1em;
  margin-bottom: 1em;
}

.cta-main {padding-top: 1em;}

.step-divider {
  background: #fafafa;
  text-align: center;
  padding: 1.5em 0;
  margin: 1em -1em 0;
  border-top: 1px solid #f0f0f0;
}
.step-divider .step-next,
.step-divider .form-submit {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  padding: 1em 1em 0.9em;
  min-width: 12em;
  font-family: "proxima-nova", Georgia, serif;
  font-size: 1.35em;
  font-weight: bold;
  background-color: #44aaff;
  border-radius: 2px;
  border: none;
  border-bottom: 2px solid #3d97e2;
  -webkit-box-shadow: rgba(0,0,0,0.15) 0 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.15) 0 1px 3px;
  box-shadow: rgba(0,0,0,0.15) 0 1px 3px;
  color: #fff;
  -webkit-appearance: none;
  -appearance: none;
  text-align: center;
  cursor: default;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.step-divider .step-next:hover,
.step-divider .form-submit:hover,
.step-divider .step-next:focus,
.step-divider .form-submit:focus {
  background-color: #3d9ded;
  border-color: #3586c9;
}
.step-divider .step-next:active,
.step-divider .form-submit:active {
  background-color: #1970b8;
  border-color: #1970b8;
}
.step-divider .step-next:disabled,
.step-divider .form-submit:disabled {
  background-color: #ccc;
  border-color: #bbb;
}

.step-divider .step-back {padding: 0.5em 0.75em;}

#step-processing,
#step-processing-failure {
  text-align: center;
  padding: 2em;
  position: relative;
}
#step-processing .processing-display {
  display: inline-block;
  width: 96px;
  height: 96px;
  border-radius: 96px;
  border: 1px solid rgba(68,170,255,0.3);
  margin: 2em 0;
  background-color: #ffffff;
  background-size: 50% 60%, auto auto;
  background-position: center center, 0 0;
  background-image: url(../img/wfp-loader.svg), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f8f8f8));
  background-image: url(../img/wfp-loader.svg), -webkit-linear-gradient(top, #ffffff, #f8f8f8);
  background-image: url(../img/wfp-loader.svg), -moz-linear-gradient(top, #ffffff, #f8f8f8);
  background-image: url(../img/wfp-loader.svg), -o-linear-gradient(top, #ffffff, #f8f8f8);
  background-image: url(../img/wfp-loader.svg), -ms-linear-gradient(top, #ffffff, #f8f8f8);
  background-image: url(../img/wfp-loader.svg), linear-gradient(top, #ffffff, #f8f8f8);
  background-repeat: no-repeat, repeat;

  box-shadow: rgba(68,170,255,0.5) 0 0 8px,
              inset rgba(0,0,0,0.15) 0 -1px 3px;

  /* define animation details */
  -webkit-animation-name: pulsate;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: pulsate;
  -moz-animation-duration: 1.5s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  animation-name: pulsate;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* animation keyframes */
@-webkit-keyframes pulsate {
  0% { box-shadow: rgba(68,170,255,0.2) 0 0 15px; border-color: rgba(68,170,255,0.15); }
  50% { box-shadow: rgba(68,170,255,0.6) 0 0 15px; border-color: rgba(68,170,255,0.5); }
  100% { box-shadow: rgba(68,170,255,0.2) 0 0 15px; border-color: rgba(68,170,255,0.15); }
}
@keyframes pulsate {
  0% { box-shadow: rgba(68,170,255,0.2) 0 0 15px; border-color: rgba(68,170,255,0.15); }
  50% { box-shadow: rgba(68,170,255,0.6) 0 0 15px; border-color: rgba(68,170,255,0.5); }
  100% { box-shadow: rgba(68,170,255,0.2) 0 0 15px; border-color: rgba(68,170,255,0.15); }
}

#step-processing-failure .failure-display {
  display: inline-block;
  width: 96px;
  height: 96px;
  border-radius: 96px;
  border: 1px solid rgba(255,0,0,0.35);
  margin: 3em 0;
  background-color: #ffffff;
  background-size: 40% 50%, auto auto;
  background-position: center center, 0 0;
  background-image: url(../img/wfp-failure.svg), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f8f8f8));
  background-image: url(../img/wfp-failure.svg), -webkit-linear-gradient(top, #ffffff, #f8f8f8);
  background-image: url(../img/wfp-failure.svg), -moz-linear-gradient(top, #ffffff, #f8f8f8);
  background-image: url(../img/wfp-failure.svg), -o-linear-gradient(top, #ffffff, #f8f8f8);
  background-image: url(../img/wfp-failure.svg), -ms-linear-gradient(top, #ffffff, #f8f8f8);
  background-image: url(../img/wfp-failure.svg), linear-gradient(top, #ffffff, #f8f8f8);
  background-repeat: no-repeat, repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff', EndColorStr='#f8f8f8');

  box-shadow: rgba(255,0,0,0.5) 0 0 8px,
              inset rgba(0,0,0,0.15) 0 -1px 3px;
}

#step-processing h3,
#step-processing-failure p {
  font-weight: 300;
  font-family: "proxima-nova";
  margin: 0;
  text-align: center;
}
#step-processing-failure p {text-align: left; margin-bottom: 0.35em;}
#step-processing-failure a {font-weight: 700;}
#step-processing-failure p > span {
  border-bottom: 1px solid #ccc;
  color: #44aaff;
  cursor: pointer;
}
#step-processing-failure p > span:hover {border-color: #44aaff;}

#region-sidebar-second .content {padding: 0 1em;}
#region-sidebar-second .content .content-image {text-align: center;}
#region-sidebar-second .content img {
  border-radius: 5px;
  overflow: hidden;
  box-shadow: rgba(0,0,0,0.15) 0 1px 3px;
  width: 100%;
}
#region-sidebar-second .content h2 {font-size: 1.125em; line-height: 1.25em; margin-bottom: 0.75em;}
#region-sidebar-second .content p {font-size: 0.875em; line-height: 1.45em; margin-bottom: 0.75em;}


/* footer styles */
.section-footer {
  margin-top: 1em;
  padding: 1.5em 1em;
  border-top: 5px solid #e6e6e6;
}
.section-footer .content #footer {
  font-size: 0.75em;
  font-weight: 300;
  text-align: center;
}
.section-footer .content .zone-left {
  display: block;
}
.section-footer .content .zone-center {
  display: block;
}
.section-footer .content .zone-right {
  display: block;
}
.section-footer .content #mc-wfp img {
  max-width: 156px;
}
.section-footer .content #copyright {
  padding-bottom: 1.75em;
}
.section-footer .content #payment-types {
  margin-bottom: 1em;
  display: none;
}
.section-footer .content #payment-types div {
  display: inline-block;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  line-height: 0;
  width: 18%;
  max-width: 64px;
  background: #fff;
}
.section-footer .content #payment-types img {max-width: 64px;}
.section-footer .content #lang {
  display: inline-block;
  width: 58%;
  text-align: left;
  vertical-align: top;
}
.section-footer .content #lang p {
  padding: 0;
  margin: 0;
}
.section-footer .content #lang .select-custom {
  color: #555;
  font-weight: 700;
  word-break: keep-all;
  text-shadow: rgba(255,255,255,0.75) 0 1px 1px;
  background-color: #f7f7f7;
  background-image: url(../img/arrow-down.png), -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#ececec));
  background-image: url(../img/arrow-down.png), -webkit-linear-gradient(top, #f7f7f7, #ececec);
  background-image: url(../img/arrow-down.png), -moz-linear-gradient(top, #f7f7f7, #ececec);
  background-image: url(../img/arrow-down.png), -o-linear-gradient(top, #f7f7f7, #ececec);
  background-image: url(../img/arrow-down.png), -ms-linear-gradient(top, #f7f7f7, #ececec);
  background-image: url(../img/arrow-down.png), linear-gradient(top, #f7f7f7, #ececec);
  background-position: 100% 50%, 0 0;
  background-repeat: no-repeat;
  background-size: 20%, 100%;
  -webkit-box-shadow: rgba(0,0,0,0.1) 0 1px 3px,
              inset rgba(255,255,255,1.0) 0 1px 0;
  -moz-box-shadow: rgba(0,0,0,0.1) 0 1px 3px,
              inset rgba(255,255,255,1.0) 0 1px 0;
  box-shadow: rgba(0,0,0,0.1) 0 1px 3px,
              inset rgba(255,255,255,1.0) 0 1px 0;
  padding: 0.4em 1.75em 0.3em 0.5em;
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  cursor: default;
  -webkit-transition: border-color 0.2s ease-in-out;
  -moz-transition: border-color 0.2s ease-in-out;
  transition: border-color 0.2s ease-in-out;
  max-width: 100px;
}
.section-footer .content #geotrust {
  display: inline-block;
  vertical-align: middle;
  text-align: right;
  width: 40%;
  margin-top: 1.5em;
}
.section-footer .content #geotrust img {max-width: 118px;}
.section-footer .content img {width: 100%;}

.desaturate {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  opacity: 0.5;
  -webkit-transition: -webkit- 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.desaturate:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  opacity: 1;
}


/* Use branding colours */
::selection, ::-moz-selection {
    background: #0088ff;
    color: #ffffff;
}

::-moz-selection {
    background: #0088ff;
    color: #ffffff;
}

::-webkit-selection {
    background: #0088ff;
    color: #ffffff;
}

.break {
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #EBEBEB;
}

.break a,
.break a:active,
.break a:link,
.break a:visited {
  padding: 10px 30px;
  font-size: 120%;
  font-weight: bold;
  background-color: #0088ff;
  color: #FFFFFF;
  border: 1px solid #6999CA;
  text-decoration: none;
}

.break a:hover {
  color: #fff;
}

.break.two {
  width: 50%;
  display: inline-block;
}

#wfp-donation-builder-form-builder {color: #555;}
#wfp-donation-builder-form-builder .form-required {
    color: #0088ff;
    margin-left: 0.25em;
}

.form-type-radio .description, .form-type-checkbox .description {
  margin-left: 0;
  margin-top: 0.5em;
  font-size: 1em;
}
#notice-info-wrapper .form-item {margin: 0; padding: 0;}

#notice-info-wrapper div[id*="notice-"] {
  border-left: 2px solid #2A93FC;
  padding-left: 12px;
}

/* Country Select */
.ui-autocomplete {
  padding: 0;
  list-style: none;
  background-color: #fff;
  width: 218px;
  border: 1px solid #B0BECA;
  max-height: 350px;
  overflow-y: scroll;
  box-shadow: rgba(0,0,0,0.3) 0 1px 12px;
  border: none;
}

.ui-autocomplete .ui-menu-item a {
  border-top: 1px solid #B0BECA;
  display: block;
  padding: 4px 6px;
  color: #353D44;
}
.ui-autocomplete-input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  font-size: 1em;
  font-weight: 700;
  padding: 1em 0.75em 0.95em;
  border-radius: 2px;
  border: 2px solid #e0e0e0;
  -webkit-appearance: none;
}
.ui-autocomplete .ui-menu-item a {
  background: #fff;
  font-size: 0.875em;
  font-weight: 700;
  border-top: none;
  padding: 0.5em 0.5em 0.4em;
  cursor: default;
}
.ui-autocomplete .ui-menu-item a:hover,
.ui-autocomplete .ui-menu-item a.ui-state-hover {
  background-color: #7abcff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#7abcff), to(#4096ee));
  background-image: -webkit-linear-gradient(top, #7abcff, #4096ee);
  background-image: -moz-linear-gradient(top, #7abcff, #4096ee);
  background-image: -o-linear-gradient(top, #7abcff, #4096ee);
  background-image: -ms-linear-gradient(top, #7abcff, #4096ee);
  background-image: linear-gradient(top, #7abcff, #4096ee);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#7abcff', EndColorStr='#4096ee');
  color: #fff;
  text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
}

/* Styles for step-cause */
#step-cause > div > label {margin-bottom: 0.75em;}
#step-cause .option span {font-weight: normal;}
#step-cause > div .fund-details {
  border: 1px solid #d7d7d7;
  border-radius: 5px;
  padding: 1em 1em 0.85em;
  margin-bottom: 0.75em;
  overflow: hidden;
  text-shadow: rgba(255,255,255,0.75) 0 1px 1px;
  background-color: #f7f7f7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#ececec));
  background-image: -webkit-linear-gradient(top, #f7f7f7, #ececec);
  background-image: -moz-linear-gradient(top, #f7f7f7, #ececec);
  background-image: -o-linear-gradient(top, #f7f7f7, #ececec);
  background-image: -ms-linear-gradient(top, #f7f7f7, #ececec);
  background-image: linear-gradient(top, #f7f7f7, #ececec);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f7f7f7', EndColorStr='#ececec');

  -webkit-box-shadow: rgba(0,0,0,0.1) 0 1px 3px,
              inset rgba(255,255,255,1.0) 0 1px 0;
  -moz-box-shadow: rgba(0,0,0,0.1) 0 1px 3px,
              inset rgba(255,255,255,1.0) 0 1px 0;
  box-shadow: rgba(0,0,0,0.1) 0 1px 3px,
              inset rgba(255,255,255,1.0) 0 1px 0;
}
#step-cause > div .fund-details:hover {border: 1px solid #ccc;}
#step-cause > div .selected .fund-details {
  background: #909090;
  color: #fff;
  border-color: #707070;
  text-shadow: rgba(0,0,0,0.25) 0 1px 1px;
  box-shadow: inset rgba(0,0,0,0.25) 0 1px 3px;
}
#step-cause > div .fund-details h4 {font-size: 1em; line-height: 1em;}
#step-cause > div .fund-details p {line-height: 1.35em;}
#step-cause > div .fund-details p:last-child {margin-bottom: 0;}
#step-cause > div .fund-details span {
  display: none;
  width: 64px;
  height: 64px;
  float: left;
  margin-right: 1em;
  border-radius: 5px;
  overflow: hidden;
}
#step-cause > div .fund-details img {max-width: 100%; height: auto;}

/* Currency radio selector */
#step-donation-currency-wrapper {
  display: block;
  position: relative;
}
.step-donation-currency > div > label {width: 75%; margin-bottom: 0.5em;}
.step-donation-currency .form-radios {
  width: 100%;
  text-align: center;
  margin-top: 1em;
}
.step-donation-currency .form-type-radio,
.step-donation-currency .form-type-textfield,
.step-donation-currency .form-type-telfield {
  width: 48%;
  display: block;
  float: left;
  margin-right: 4%;
  height: 3.25em;
}
.step-donation-currency [class*="-amounts-other"] {
  margin-right: 0;
  margin-top: 6px;
  box-sizing: border-box;
}

.step-donation-currency .form-type-radio:nth-child(2n),
.step-donation-currency .form-type-textfield:nth-child(2n),
.step-donation-currency .form-type-telfield:nth-child(2n) {margin-right: 0;}
.step-donation-currency .form-type-radio .option {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0.75em 0.5em 0.65em;
  text-align: center;
  font-size: 1.1em;
  font-weight: 700;
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  text-shadow: rgba(255,255,255,0.75) 0 1px 1px;
  background-color: #f7f7f7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#ececec));
  background-image: -webkit-linear-gradient(top, #f7f7f7, #ececec);
  background-image: -moz-linear-gradient(top, #f7f7f7, #ececec);
  background-image: -o-linear-gradient(top, #f7f7f7, #ececec);
  background-image: -ms-linear-gradient(top, #f7f7f7, #ececec);
  background-image: linear-gradient(top, #f7f7f7, #ececec);

  -webkit-box-shadow: rgba(0,0,0,0.1) 0 1px 3px,
              inset rgba(255,255,255,1.0) 0 1px 0;
  -moz-box-shadow: rgba(0,0,0,0.1) 0 1px 3px,
              inset rgba(255,255,255,1.0) 0 1px 0;
  box-shadow: rgba(0,0,0,0.1) 0 1px 3px,
              inset rgba(255,255,255,1.0) 0 1px 0;

  word-break: keep-all;
  cursor: default;

  white-space: nowrap;

  -webkit-transition: border-color 0.2s ease-in-out;
  -moz-transition: border-color 0.2s ease-in-out;
  transition: border-color 0.2s ease-in-out;
}
.step-donation-currency .form-type-radio .option:hover,
.step-donation-currency .form-type-radio .option:focus {border-color: #aaa;}
.step-donation-currency .form-type-radio .option.selected {
  background: #909090;
  color: #fff;
  border-color: #707070;
  text-shadow: rgba(0,0,0,0.25) 0 1px 1px;
  box-shadow: inset rgba(0,0,0,0.25) 0 1px 3px;
}

.form-text, .form-textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  font-size: 1em;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 1em 0.75em 0.95em;
  border-radius: 2px;
  border: 2px solid #e0e0e0;
  -webkit-appearance: none;
}
.form-text:disabled, .form-textarea:disabled {
  background-color: #eaeaea;
  color: #555;
  font-weight: bold;
}

.step-donation-currency .currency-value-other {
  width: 100%;
  font-size: 1.25em;
  font-weight: 700;
  padding: 0.6em 0.45em 0.5em;
  margin: 0;
  text-align: center;
}
.step-donation-currency .currency-value-other + label {
  width: 280px;
}

.form-item-donation-frequency {clear: both;}

#step-donor-details .form-item label {margin-top: 0.05em;}
#step-donor-details .description {
  letter-spacing: normal;
  word-spacing: normal;
  margin-top: 1em;
  line-height: 1.2;
}

/*div[class*="form-item-payment-method-"] > label {margin-bottom: 0.5em;}*/
.payment-methods-list {width: 100%;}
.payment-methods-list .payment-method {
  display: block;
  position: relative;
  width: 22%;
  height: 15%;
  float: left;
  margin-right: 4%;
  margin-bottom: 0.75em;
}
.payment-methods-list .payment-method:nth-child(4n) {margin-right: 0;}
.payment-methods-list .payment-method {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  /*width: 100%;
  height: 100%;*/
  border: 2px solid #e0e0e0;
  border-radius: 2px;
  text-align: center;
  overflow: hidden;
  font-weight: 700;
  padding: 0;
  cursor: default;
  -webkit-transition: border-color 0.2s ease-in-out;
  -moz-transition: border-color 0.2s ease-in-out;
  transition: border-color 0.2s ease-in-out;
  position: relative;
}
.payment-methods-list .payment-method img {
  max-width: 100%;
  vertical-align: middle;
}
.payment-methods-list .payment-method:hover {border-color: #aaa;}
.payment-methods-list .payment-method.selected {
  border-color: #0089fc;
  box-shadow: rgba(68,170,255,1.0) 0 0 5px;
}
.payment-methods-list .payment-method.disabled {
  opacity: 0.2;
  border: 2px solid #fff;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.payment-methods-list .payment-method.disabled:hover {opacity: 0.75;}
/*div[class*="form-item-payment-method-"] > .form-radios .form-item > label {display: none;}*/
/*.payment-methods-list {margin-bottom: 1.5em;}*/


/* Currency Switcher */
#currency-switch {
  width: auto;
  min-width: 60%;
  text-align: right;
  position: absolute;
  right: 0px;
  top: 15px;
}
#currency-switch #switch-label {
  color: #555;
  font-weight: 700;
  word-break: keep-all;
  text-transform: uppercase;
  text-shadow: rgba(255,255,255,0.75) 0 1px 1px;
  background-color: #f7f7f7;
  background-image: url(../img/arrow-down.png), -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#ececec));
  background-image: url(../img/arrow-down.png), -webkit-linear-gradient(top, #f7f7f7, #ececec);
  background-image: url(../img/arrow-down.png), -moz-linear-gradient(top, #f7f7f7, #ececec);
  background-image: url(../img/arrow-down.png), -o-linear-gradient(top, #f7f7f7, #ececec);
  background-image: url(../img/arrow-down.png), -ms-linear-gradient(top, #f7f7f7, #ececec);
  background-image: url(../img/arrow-down.png), linear-gradient(top, #f7f7f7, #ececec);
  background-position: 100% 50%, 0 0;
  background-repeat: no-repeat;
  background-size: 32%, 100%;
  -webkit-box-shadow: rgba(0,0,0,0.1) 0 1px 3px,
              inset rgba(255,255,255,1.0) 0 1px 0;
  -moz-box-shadow: rgba(0,0,0,0.1) 0 1px 3px,
              inset rgba(255,255,255,1.0) 0 1px 0;
  box-shadow: rgba(0,0,0,0.1) 0 1px 3px,
              inset rgba(255,255,255,1.0) 0 1px 0;
  padding: 0.4em 1.75em 0.3em 0.5em;
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  cursor: default;
  -webkit-transition: border-color 0.2s ease-in-out;
  -moz-transition: border-color 0.2s ease-in-out;
  transition: border-color 0.2s ease-in-out;
}
#currency-switch #switch-label:hover {border-color: #aaa;}
#currency-switch #options-wrapper {position: relative; }
#currency-switch .options {
  display: none;
  position: absolute;
  top: 0.25em;
  right: 0;
  background-color: white;
  width: auto;
  box-shadow: rgba(0,0,0,0.3) 0 1px 12px;
  border: none;
  width: 272px;
  z-index: 20;
}

#currency-switch .options .currency {
  background: #fff;
  font-size: 1em;
  font-weight: 400;
  border-top: none;
  padding: 0.65em 0.65em 0.5em;
  margin-bottom: 0;
  display: block;
  text-align: left;
  cursor: default;
}

#currency-switch .options .currency > input[type=radio] {vertical-align: text-bottom;}

#currency-switch .options .currency:hover,
#currency-switch .options .currency:active,
#currency-switch .options .currency:focus {
  background-color: #7abcff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#7abcff), to(#4096ee));
  background-image: -webkit-linear-gradient(top, #7abcff, #4096ee);
  background-image: -moz-linear-gradient(top, #7abcff, #4096ee);
  background-image: -o-linear-gradient(top, #7abcff, #4096ee);
  background-image: -ms-linear-gradient(top, #7abcff, #4096ee);
  background-image: linear-gradient(top, #7abcff, #4096ee);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#7abcff', EndColorStr='#4096ee');
  color: #fff;
  text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
}

/* Form-specific styles */
#payment-methods .card-expire {
  float: left;
  width: 36%;
  margin-right: 4%;
}
#payment-methods .card-expire > .form-item {position: relative; float: left; width: 48%; margin-right: 4%; margin-top: 0; margin-bottom: 0.5em;}
#payment-methods .card-expire > div[class*="expire-year"] {margin-right: 0;}

#payment-methods .card-expire + .form-item {
  display: block;
  float: left;
  width: 60%;
  vertical-align: top;
  margin-top: 0;
}
#payment-methods .card-cvv {width: 34%; margin-right: 4%;display: block}

#payment-methods div[class*="postcode"],
#payment-methods div[class*="city"] {float:left;}
#payment-methods div[class*="postcode"] {width: 36%; margin-right: 4%;}
#payment-methods div[class*="city"] {width: 60%;}

#payment-methods div[class*="postcode"],
#payment-methods div[class*="city"],
#payment-methods div[class*="address"],
#payment-methods div[class*="country"] {margin-top: 0;}

#payment-methods .card-expire-month + label.invalid,
#payment-methods .card-expire-year + label.invalid {
  width: 250%;
}

.links {
  padding: 0 1em;
}
.links p {
  font-size: 0.75em;
  line-height: 1.45em;
  margin-bottom: 0;
}
.links .disclaimer {display: none;}
.links .disclaimer-narrow {display: block;}

.message {
  margin: 0;
  text-align: center;
  font-weight: 600;
}

/* Specificity for labels */
label {
  display: block;
  font-family: "proxima-nova", "Helvetica Neue", serif;
  font-size: 1.125em;
  font-weight: bold;
  margin-bottom: 0.25em;
  margin-top: 0;
}
label.invalid,
.invalid-static,
.form-type-radio label,
.form-type-checkbox label {
  display: inline;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1em;
  vertical-align: middle;
  margin-bottom: 0;
  margin-top: 0;
}
input.form-checkbox, input.form-radio {
  margin-left: 0px;
  vertical-align: top;
  position: relative;
  top: 1px;
  *overflow: hidden;
}
.form-checkboxes .form-item, .form-radios .form-item {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Validation Styles */
#container-errors {
  display: block;
}
label.invalid {
  display: block;
  color: #fff;
  font-weight: 300;
  background-color: #ff9640;
  padding: 0.35em 0.5em 0.3em;
  border-radius: 0 0 2px 2px;
  margin-top: -2px;
}
.invalid-static {
  display: block;
  color: #fff;
  background-color: #ff9640;
  padding: 0.5em 0.75em 0.35em;
  border-radius: 2px;
  font-weight: 700;
  text-align: center;
  clear: both;
}
input.valid {
  border: 2px solid #9fc734;
  padding: 1em 0.75em 0.95em;
}
input.invalid {
  border: 2px solid #ff9640;
  border-radius: 2px 2px 0 0;
  padding: 1em 0.75em 0.95em;
  margin-bottom: 0;
}
input.invalid:last-child {
  border-radius: 2px;
}
input.invalid + label.invalid {
  border-radius: 0 0 2px 2px;
}
input.valid:focus,
input.invalid:focus {outline: 0;}


/* Tooltips for Donation Cause step */
#funds .step-title {margin-bottom: 0.75em;}
.field-suffix-help {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  right: 0;
  color: #fafafa;
  font-family: "proxima-nova", "Georgia", serif;
  font-weight: 700;
  text-align: center;
  line-height: 21px;
  background-color: #888;
  border-radius: 18px;
  cursor: default;
}
.field-suffix-content {
  margin-top: 0.5em;
  padding: 0.5em 0;
  border-top: 1px solid #dedede;
}
.field-suffix-content p:last-child {margin-bottom: 0.5em;}


.card-expire + .form-item .field-suffix-help {
  top: 36px;
  left: 40%;
  width: 58%;
  max-width: 150px;
  display: inline-block;
  padding: 0.25em;
}
#payment-methods div[class*="country"] .field-suffix-help {
  top: 52%;
  right: 3%;
}
.field-suffix-help:hover,
.field-suffix-help:active {background-color: #555;}

#funds .field-suffix-wrapper {
  max-width: 100%;
  margin: -1em -1em 0;
  padding: 0.75em 1em 0;
  box-shadow: rgba(0,0,0,0.3) 0 0 24px;
  background-color: #fff;
}
#funds .field-suffix-wrapper img {
  max-width: 100%;
  margin-bottom: 0.75em;
}

.tooltipster-content img {width: 100%; border-radius: 5px; overflow: hidden;}
.tooltipster-content ul {margin: 0 0 0 -0.5em;}
.tooltipster-content p {margin-bottom: 0.75em;}
.tooltipster-content p:last-child {margin-bottom: 0; padding-bottom: 0;}

/* Tooltipster Shadow Theme */
.tooltipster-shadow {
  border-radius: 2px;
  background: #fff;
  box-shadow: 0px 0px 24px rgba(0,0,0,0.3);
  color: #2c2c2c;
}
.tooltipster-shadow .tooltipster-content {
  font-size: 14px;
  line-height: 18px;
  padding: 0.75em 1em;
}


form.full .donation-step {border-bottom: 1px solid #eaeaea;}
form.full #step-donor-details {padding-bottom: 0.25em;}
form.full #step-payment-method {padding-bottom: 0; border-bottom: none;}

#placeholder {
  display: block;
  text-align: center;
  padding: 6em 0 5em;
  /* define animation details */
  -webkit-animation-name: blink;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: blink;
  -moz-animation-duration: 1.5s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  animation-name: blink;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* animation keyframes */
@-webkit-keyframes blink {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}
@keyframes blink {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* Initial hidden values */
#step-payment-method input[type=radio],
.step-donation-currency input[type=radio],
.field-suffix-wrapper,
#step-processing,
#step-processing-failure,
#step-submit,
#region-sidebar-second,
.tooltip-content {display: none;}

.boxme-outer {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.75);
  z-index: 1001;
}
.boxme-inner {
  position: absolute;
  display: none;
  width: auto;
  height: auto;
  box-shadow: rgba(0,0,0,0.3) 0 0 16px;
  background-color: #fff;
  padding: 1em;
  border-radius: 3px;
  z-index: 1002;
}
.boxme-close {
  position: absolute;
  display: block;
  top: -16px;
  right: -16px;
  width: 28px;
  height: 28px;
  font-weight: bold;
  color: #eaeaea;
  padding: 0.25;
  border-radius: 0 3px 0 3px;
  text-indent: 100%;
  overflow: hidden;
  background: url(../img/close.png) no-repeat;
}

/*
 * Overrides for the Thank-You page
 */
.node-donation-thank-you {
  padding-top: 3em;
  padding-bottom: 2em;
}
.node-type-donation-thank-you #wfp-donation-builder-form-builder {
  background-color: #f0f0f0;
  box-shadow: none;
}
.node-type-donation-thank-you #region-header-first,
.node-type-donation-thank-you #navigation-steps {
  display: none;
}
.node-type-donation-thank-you #step-country {
  display: block;
}

/*
 * RTL Language Display
 */
html[dir=rtl] #section-header .branding-data .logo-img,
html[dir=rtl] #region-content,
html[dir=rtl] .section-footer .content .zone-left,
html[dir=rtl] .section-footer .content .zone-center
{float: right;}

html[dir=rtl] #section-header .branding-data .tagline,
html[dir=rtl] #region-sidebar-second,
html[dir=rtl] .section-footer .content .zone-right
{float: left;}

html[dir=rtl] .field-suffix-help,
html[dir=rtl] #currency-switch,
html[dir=rtl] #currency-switch .options {right: auto; left: 0;}

html[dir=rtl] #currency-switch {text-align: left;}
html[dir=rtl] #currency-switch .options .currency {text-align: right;}
html[dir=rtl] #payment-methods .card-cvv,
html[dir=rtl] #step-donor-details .form-item {margin-right: 0;}

html[dir=rtl] .card-expire + .form-item .field-suffix-help {left: auto; right: 40%;}
html[dir=rtl] #payment-methods div[class*="country"] .field-suffix-help {right: auto; left: 3%;}

html[dir=rtl] #in-honour-honour,
html[dir=rtl] #in-honour-memoriam,
html[dir=rtl] #step-donor-details,
html[dir=rtl] #step-payment-card {text-align: left;}

html[dir=rtl] #in-honour-honour .form-item,
html[dir=rtl] #in-honour-memoriam .form-item,
html[dir=rtl] #step-donor-details .form-item,
html[dir=rtl] #step-payment-card .form-item {
  text-align: right;
}



@media only screen and (min-width: 768px) {
  #section-header .branding-data{margin:0.75em 1em 0.6em;}
  #section-header .branding-data .tagline-narrow h3{font-size:1em;font-weight:700;width:auto;margin:0;max-width:16em;float:right;padding:1.25em 0;}
  h1,.h1{color:#555;margin:1.5em 0;font-size:36px;font-size:1.75em;line-height:1.125em;}
  #navigation-steps .navigation-step{padding:3% 0;font-size:1em;letter-spacing:normal;}
  #navigation-steps .navigation-step span{display: inline;}
  .donation-step{font-size:1em;padding:1em 2em 0;}
  .step-divider{margin:2em -2em 0;}

  .step-donation-currency > div > label{width:80%;margin-bottom:1em;}
  .step-donation-currency .form-type-radio,
  .step-donation-currency .form-type-textfield,
  .step-donation-currency .form-type-telfield {
    width:22%;
    display:block;
    float:left;
    margin-right:4%;
    margin-bottom:0.35em;
    height:3.25em;
  }
  .step-donation-currency .form-type-radio:nth-child(2n),
  .step-donation-currency .form-type-textfield:nth-child(2n),
  .step-donation-currency .form-type-telfield:nth-child(2n) {margin-right:4%;}
  .step-donation-currency .form-type-radio:nth-child(4n),
  .step-donation-currency .form-type-textfield:nth-child(4n),
  .step-donation-currency .form-type-telfield:nth-child(4n),
  .step-donation-currency .form-type-telfield:last-child {margin-right:0;}

  #in-honour-honour,
  #in-honour-memoriam,
  #step-donor-details,#step-payment-card {
    letter-spacing: -.31em;
    word-spacing: -.43em;
  }
  #step-donor-details p,
  #step-payment-card p {
    letter-spacing: 0;
    word-spacing: 0;
    margin-top: 1em;
  }
  #step-donor-details .step-divider,
  #step-payment-card .step-divider,
  .card-expire {
    letter-spacing:normal;
    word-spacing:normal;
  }
  #in-honour-honour .form-item,
  #in-honour-memoriam .form-item,
  #step-donor-details .form-item {
    display:inline-block;
    width:48%;
    margin-right:4%;
    letter-spacing:normal;
    word-spacing:normal;
    margin-bottom:0;
    vertical-align:top;
}
  #in-honour-honour .form-item:nth-child(2n),
  #in-honour-memoriam .form-item:nth-child(2n),
  #step-donor-details .form-item:nth-child(2n),
  #step-payment-card .form-item:nth-child(2n) {
    margin-right:0;
  }
  #step-payment-card .form-item:nth-child(4){
    margin-right:4%;
  }
  #in-honour-honour .form-item:last-child,
  #in-honour-memoriam .form-item:last-child {
    width:100%;
  }
  #step-processing,
  #step-processing-failure {
    padding:3em;
  }
  #region-sidebar-second .content {
    font-size:1.125em;
  }
  #region-sidebar-second .content .content-image{
    width:40%;
    float:right;
    margin-left:4%;
  }
  .radio-details-help{
    width:24px;
    height:24px;
    line-height:25px;
  }
  .links{
    font-size:1.125em;
  }
  label {
    font-size:1.125em;
  }
  form.full .donation-step{
    padding-bottom:1em;
    padding-top:1em;
  }
  form.full #step-donor-details{padding-bottom:2.25em;}
  .step-donation-currency [class*="-amounts-other"] {
    margin-right: 0;
    margin-top: 0.5em;
    box-sizing: border-box;
  }
  .title, .title-narrow {font-size: 1.75em;}

  .links .disclaimer {display: block;}
  .links .disclaimer-narrow {display: none;}

  .section-footer .content .zone-left {
    display: block;
    float: left;
    width: 25%;
  }
  .section-footer .content .zone-center {
    display: block;
    float: left;
    width: 50%;
  }
  .section-footer .content .zone-right {
    display: block;
    float: left;
    width: 25%;
    text-align: right;
  }

  .section-footer .content #payment-types {
    display: block;
  }
  .section-footer .content #lang {
    display: block;
    width: auto;
    text-align: left;
    margin-left: 40px;
    max-width: 160px
  }
  .section-footer .content #geotrust {
    display: block;
    width: auto;
    text-align: center;
  }
}

@media only screen and (min-width: 840px) {
  body {min-width: 840px;}
  .container-12 {width: 840px;}
  #section-header .branding-data{margin:0.75em 0 0.6em;}
  #wfp-donation-builder-form-builder {display:block;border-radius:5px;}
  #wfp-donation-builder-form-builder .step-divider {border-radius:0 0 5px 5px;}
  #navigation-steps .navigation-step {padding:3% 0;font-size:0.75em;}
  .donation-step {font-size:0.875em;padding:1em 3em 0;}
  .step-divider {margin:2em -3em 0;}
  #in-honour-honour .form-item,
  #in-honour-memoriam .form-item,
  #step-donor-details .form-item,
  #step-payment-card .form-item {
    width:100%;
    margin-right: 0;
  }
  .card-expire{width:32%;}.form-item-card-cvv{width:64%;}#region-sidebar-second{display:block;}#region-sidebar-second .content{padding:0;font-size:1em;}#region-sidebar-second .content .content-image{float:none;margin-left:0;margin-bottom:1em;width:100%;}#region-sidebar-second .content .cta-donate{display:none;}.radio-details-help{width:20px;height:20px;line-height:21px;}.links{font-size:0.875em;}label{font-size:1.125em;}.section-footer{padding:1.5em 0;}#region-sidebar-second{display: block;}
  #section-header .branding-data .tagline-narrow {display: none;}
  #section-header .branding-data .tagline {display: block; float: right;margin-top: 0.5em;text-align: right;}
  .title {display: block;}
  .title-narrow {display: none;}
}