/**************************************************
Joint SDg Fund - Branded Theme

This is the core theme for the Joint Sdg Fund.


Submit all changes as a Pull Request on GitHub.

Repository:https://github.com/UnitedNationsFoundation/EveryActionThemes

This file sets all the core attributes for the apperance, page header, and media queries used to taylor form content to various screen sizes.
**************************************************/

* {
  box-sizing:border-box;
}

/* Sets defaults for the page */
body {
  background-color:#FFF;
  color:#000;
  padding:0;
  margin:0;
  font-size:1rem;
  line-height:1.3em;
}

/* Centers Page */
.content.ngp-content {
  margin:0 auto;
}

/* Fixed Header */
header.branding {
  padding:20px 0;
  width:100%;
}

/* Header image scaling */
header.branding img {
  max-width:100%;
  height:auto;
}

var {font-style:normal;}
/********************************
  EA Form
*********************************/
/* Font color, center form */
.at.ngp-form {
  color:#333;
  margin:0 auto;
  max-width:800px;
}

/* Sets Background Color, rounds corners, and sets whitespace between content and inner edge of container */
.at.ngp-form section.at-inner {
  background-color:rgba(255,255,255,1);
  border:0;
  border-radius:3px;
  padding:10px;
}

/* Form Title Size, Weight, and Spacing */
.at.ngp-form header.at-title {
  border-bottom:0;
  font-size:2em;
  font-weight: bold;
  line-height:1em;
  margin:20px 0;
  padding:10px;
}

/* Form Header Title and Body Content Container */
.at.ngp-form header.HeaderHtml {
  border:0;
  float:none;
  margin-bottom:0;
  margin-right:0;
  padding:0 10px;
  width:100%;
}

/* Form Header Body Content Font Size */
.at.ngp-form header.HeaderHtml p {
  font-size:.8889em; /* 16px */
  margin-top:0;
  padding:0;
}

/* Helper style to maintain font size consistency when child elements are added */
.at.ngp-form header.HeaderHtml strong, .at.ngp-form header.HeaderHtml em, .at.ngp-form header.HeaderHtml a {
  font-size: 1em; /* 16px */
}

.at.ngp-form header.HeaderHtml p,
.at.ngp-form header.HeaderHtml ul,
.at.ngp-form header.HeaderHtml ol {margin-bottom:20px;}

/* Form Heading Font Weight */
.at.ngp-form .at h1, .at.ngp-form .at h2, .at.ngp-form .at h3, .at.ngp-form .at h4, .at.ngp-form .at h5, .at.ngp-form .at h6 {
  font-weight: 700;
  text-rendering: optimizeLegibility
}

/* Form Border, Float, and Width */
body .at.ngp-form form {
  border:0;
  float:none;
  width:100%;
}

/********************************
  FastAction
*********************************/
.at.ngp-form .FastAction {
  padding:0 10px;
}

.at.ngp-form .FastAction .fastAction {
  background:transparent;
  padding:15px 0;
}

.at.ngp-form .fa-lead, .fa-lead b, .fa-lead a {
    font-size: 12px;
}

/********************************
  Form Field Styles
*********************************/
.at.ngp-form fieldset {padding:0 0 24px;}

.at.ngp-form fieldset legend {
  font-size:1.333em;
  font-weight:700;
  padding:30px 0;
}

/* Apperance of form fields */
.content form input[type="text"],
.content form input[type="email"],
.content form input[type="password"],
.content form select {
  height:40px;
  line-height:30px;
  padding:5px 10px;
  margin:0;
  width:100%;
  border-radius:3px;
  background-color:transparent;
}

.content form input[type="tel"] {
  height:40px;
  line-height:30px;
  padding: 5px 10px 5px 50px;
  margin:0;
  width:100%;
  border-radius:3px;
  background-color:transparent;
}

.at.ngp-form .at-form-submit input.at-submit {margin:20px 0 0;}

.at.ngp-form ol.at-steps {
  border:0;
  background-color:#fff;
  padding:0;
  margin:10px 10px 0;
}

.at.ngp-form ol.at-steps li {
  border-bottom:4px solid transparent;
  line-height:1em;
  margin:0 1em 0 0;
  padding:0;
}

.at.ngp-form ol.at-steps li.active {border-bottom-color:#edece4;}
.at.ngp-form ol.at-steps li:last-of-type {margin:0;}

.at.ngp-form ol.at-steps .at-step a:before,
.at.ngp-form ol.at-steps .at-step b:before {
  height:20px;
  left:0;
  transform:translateY(-50%);
}

.at.ngp-form ol.at-steps .at-step a,
.at.ngp-form ol.at-steps .at-step b {
  border:0;
  display:block;
  font-size:.7em;
  height:40px;
  line-height:40px;
  padding:0 0 0 30px;
  text-align:left;
}

.at.ngp-form ol.at-steps .at-step.active a span,
.at.ngp-form ol.at-steps .at-step.active b span {
  color:#000;
  display:block;
  font-weight:700;
  height:40px;
  line-height:40px;
}

.at.ngp-form ol.at-steps .at-step a span,
.at.ngp-form ol.at-steps .at-step b span {color:#666;}

.at.ngp-form fieldset.ContributionInformation .label-amount,
.at.ngp-form fieldset.ContributionInformation .label-amount * {
  font-weight:400;
}

/********************************
  Donation Form: Radio Buttons
*********************************/
.at.ngp-form .label-amount input[type="radio"] + a {
  border:0;
  border-radius:3px;
  transition: background-color .3s ease-in-out;
}

.at.ngp-form .label-amount.label-otheramount {margin-bottom:10px;}

.at.ngp-form .at-radio.PaymentMethod {margin-bottom:1em;}
.at.ngp-form .at-radio.PaymentMethod input[type="radio"] {margin:0 4px 5px 0;}

.at.ngp-form fieldset .at-row label {margin-bottom:10px;}
.at.ngp-form fieldset .at-row label.label-amount {margin-bottom:15px;}

.at.ngp-form .YesSignMeUpForUpdatesForBinder span, .at.ngp-form .updateMyProfileSection span {
    font-size: 0.875rem;
}

.at.ngp-form .SmsLegalDisclaimer.at-legal p {margin-bottom:10px;}

/********************************
  Donation Form: Tribute Gift
*********************************/
.at.ngp-form.multistep-layout fieldset.TributeGift,
.at.ngp-form.multistep-layout fieldset.RecipientInformation {
  padding-top:10px !important;
  padding-bottom:0 !important;
}

.at.ngp-form.multistep-layout fieldset.TributeGift {padding-top:5px !important;}

.at.ngp-form fieldset.TributeGift .form-item-inhonororinmemoryof {
  margin-left:27px;
  margin-bottom:10px;
}

.at.ngp-form fieldset.TributeGift .EnableTributeGift span {margin-bottom:0;}

.at.ngp-form fieldset.TributeGift input[type="radio"],
.at.ngp-form fieldset.PaymentInformation input[type="radio"] {
  border:0;
  height:17px;
  margin:2px 5px 2px 0;
  width:17px;
}

.at.ngp-form fieldset.TributeGift .form-item-inhonororinmemoryof .radios label {margin-bottom:0;}

.at.ngp-form fieldset.TributeGift label.HonoreeName {margin-left:27px;}

/********************************
  Donation Form: Recipient Info
*********************************/
.at.ngp-form fieldset.RecipientInformation label.IncludeRecipient span {margin-bottom:0;}

.at.ngp-form .at-recipient-info {margin-left:27px;}

.at.ngp-form .at-recipient-info .at-title {
  font-size:.778em;
  margin-bottom:10px;
}

.at.ngp-form .at-recipient-info > .RecipientInfoHeaderHtml {
  font-size:.778em;
  margin-bottom:10px;
}

.at.ngp-form fieldset.PaymentInformation label.PaymentMethod {margin-bottom:10px;}
.at.ngp-form fieldset.RecipientInformation .at-recipient-msg {margin-left:37px;}
.at.ngp-form .paypal-accepted-here label.paypal-label {margin:0;}

/********************************
  Form Submit Button
*********************************/
.at.ngp-form .at-form-submit {margin-top:20px;}

/* Submit Button Corner Radius and Capitalization */
.at.ngp-form .btn-at-primary,
.at.ngp-form .prevNext .btn-at {
  border-radius:2px;
  text-transform:uppercase;
}

/* Submit Button Background Color */
.at.ngp-form .btn-at-primary,
.at.ngp-form .btn-at.nextStep {
  background-color: #FFF;
}

/* Submit Button Borders and Font */
.at.ngp-form .btn-at-primary {
  margin:0;
  white-space:normal;
  width:100%;
  text-transform: uppercase;
  border-style: solid;
  border-width: 2px;
  cursor: pointer;
  padding: 10px 15px;
  display: inline-block;
  font-weight: 700;
  border-radius: 5px;
  font-size: 1rem;
  transition: color .2s linear,border-color .2s linear;
  background: 0 0;
}

.at.ngp-form .btn-at.prevStep {
  font-size:1em;
  padding:3px 12px;
  margin:6px 0;
}

.at.ngp-form.multistep-layout .at-form-submit {margin:0;}
.at.ngp-form .step-prevNext {padding:10px 0 20px;}
.at.ngp-form .step-prevNext .prevNext.next {float:right;}
.at.ngp-form .step-prevNext .prevNext.prev {float:left;}

.at.ngp-form .step-prevNext .prevNext.prev a {
  line-height:30px;
  margin-bottom:0;
}

/********************************
  Form Footer
*********************************/
.at.ngp-form section.at-inner footer.FooterHtml p {
  font-size:.7778em; /* 14px */
  line-height: 2em;
}

.at.ngp-form section.at-inner footer.FooterHtml strong, .at.ngp-form section.at-inner footer.FooterHtml a {
  font-size:1em;  /* 14px */
}

.at.ngp-form section.at-inner footer.FooterHtml {
  padding-top:10px;
  margin-top: 1.3889em;
  margin-bottom:0;
}

.at.ngp-form.multistep-layout section.at-inner footer.FooterHtml {
  color:#000;
  font-size:.8em;
  padding-left:0;
  padding-right:0;
}

.at.ngp-form.multistep-layout section.at-inner footer.FooterHtml * {
  color:#000;
  font-size:1em;
  padding:0;
}

/********************************
  Ancillary Content / Page Footer
*********************************/
.ancillary-content {
  background:#fff;
  font-size:14px;
  line-height:1.25em;
  margin:0 auto 40px;
  padding:10px;
  text-align:center;
}

.ancillary-content .wrapper {
  border:1px solid #000;
  padding:10px;
}

.ancillary-content p {
  margin:0 auto 20px;
  max-width:520px;
  padding-top:0;
}

.ancillary-content p:last-of-type {margin-bottom:0;}

/********************************
  Media Queries
*********************************/

/* Mobile Screen Sizes Between 360px and 480px */
@media (max-width:480px) and (min-width:360px) {
	body {background-color:rgba(042,057,144, 1);} /* UNCDF Blue */
  .lang-select {
    width: 100%;
    height: 40px;
    background-color: #f2f2f2;
    border-bottom: #009edb solid 5px !important;
    padding-top: 3px;
    position: inherit;
    z-index: 1;
    margin-bottom: 0;
  }
  ul.lang {
    width: 60%;
  }
  header.branding {
    background-repeat:no-repeat;
    background-size:cover;
    background-position:100% 50%;
  }
  header.branding {
    padding: 0;
    width:100%;
    height:320px;
    max-width:100%;
    max-height:320px;
  }
  header.branding figure {
    background-color: rgba(042,057,144, .90);
    padding: 15px;
    margin: 0;
  }

  .at.ngp-form {
    max-width: 460px;
  }

}

/* Tablet Screen Sizes Between 480px and 980px */
@media (min-width:480px) {
  body {
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:100% 50%;
  }
  header.branding {
    background-color:#000099; /* UNCDF Blue */
    width:100%;
    height:auto;
    position:fixed;
    box-shadow:0 0 2px #293333; /* UNCDF Grey */
    z-index:100;
    margin-top: 40px;
  }
  header.branding figure {
    max-width:250px;
    margin:0 0 0 25px;
  }
  body .at.ngp-form {
    margin-top:200px;
    margin-right:25px;
    margin-left: 25px;
    margin-bottom:100px;
  }

  .at.ngp-form section.at-inner {padding:10px 30px;}

}

/* Desktop Screen Sizes Above 980px */
@media (min-width:980px) {

  body {
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:100% 50%;
  }

  .content.ngp-content {
    max-width:100%;
  }

  body .at.ngp-form {
    margin-top:200px;
    margin-right:50px;
    margin-left: 50px;
    margin-bottom:100px;
  }

  .at.ngp-form section.at-inner {padding:10px 20px;}

  .ancillary-content {
    clear:both;
    width:600px;
  }

}