/**************************************************
COMMITTEE NAME - 2018 - Main Theme

This is the core theme for the COMMITTEE NAME committee.

Important: Changes to this file will have an effect on all published forms that use the "COMMITTEE NAME Main Theme."
Submit all changes as a Pull Request on GitHub.

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

Note: All style declarations are wrapped in media declarations for consistency across media types.
**************************************************/
@media screen {
  * {
    box-sizing:border-box;
    font-size:100%; /* Font size (16px) */
  }
  /* Sets defaults for the page */
  body {
    background-color:#FFF;
    line-height:1.3em;
    margin:0;
    padding:0;
  }
  header.branding img, .at.ngp-form img { /* Scalable committee logos */
    max-width:100%;
    height:auto;
  }
  var {font-style:normal;}


 /********************************
  EA Form
 *********************************/

  /* Form Size */
  body .at.ngp-form {
    max-width:750px;
    min-width:460px;
    width:53.57142857142857em; /* Form width: 650px */
  }

  /* Form Border and Padding */
  .at.ngp-form section.at-inner {
    border:0; 
    padding:0.625em; /* 10px whitespace inside container */
  }


 /**********************************
  Form Title and Body Styles
 **********************************/

  /* Form Title */
  .at.ngp-form header.at-title {
    border-bottom:0;
    font-size:2em; /* Form title font size */
    font-weight: 700;
    line-height:1.46em;
    margin:.9375em 0 .625em; /* Whitespace above and below form title */
    padding:0;
  }
  /* Whitespace around form body content and form fields */
  .at.ngp-form header.HeaderHtml, .at.ngp-form form {
    border:0;
    margin-bottom:0;
    padding:0 2.50em; /* 40px whitespace around form */
  }
  .at.ngp-form header.HeaderHtml .youtube-embed-wrapper {
    margin-bottom: 2em; /* 32px whitespace between video and content below */
  }
  /* 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 */
  }
  /* Donate by check option font size */
  .at.ngp-form header.HeaderHtml p.donate-by-check {
    font-size:0.7500em;
  }
  /* Paragraph and List Bottom Margin */
  .at.ngp-form header.HeaderHtml p,
  .at.ngp-form header.HeaderHtml ul,
  .at.ngp-form header.HeaderHtml ol {
    margin-top:0;
    margin-bottom:2.0625em;
  }
  /* 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
  }


 /********************************
  FastAction
 *********************************/

  .at.ngp-form .FastAction .fastAction {
    background:transparent;
    padding:0.9375em 0;
  }
  .at.ngp-form .FastAction .fastAction p, .at.ngp-form .FastAction .fastAction b, .at.ngp-form .FastAction .fastAction a {
    font-size:1em;
  }
  .at.ngp-form .fa-lead, .fa-lead b, .fa-lead a {
    font-size: 0.75em;
  }


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

  .at.ngp-form fieldset {padding:0 0 1.5em;}

  .at.ngp-form fieldset legend {
    font-size:1.5em;
    font-weight:700;
    margin:0;
    padding:1.25em 0 0.8333333333333334em;
  }


 /*********************************
  Input Field Styles and States
 *********************************/

  /* Size and shape of form fields */
  .content form input[type="text"],
  .content form input[type="password"],
  .content form input[type="date"],
  .content form input[type="datetime"],
  .content form input[type="datetime-local"],
  .content form input[type="month"],
  .content form input[type="week"],
  .content form input[type="email"],
  .content form input[type="number"],
  .content form input[type="search"],
  .content form input[type="tel"],
  .content form input[type="time"],
  .content form input[type="url"],
  .content form input[type="color"],
  .content form textarea,
  .content form select {
    background-color:transparent;
    border-color:rgba(8, 58, 91, .35); /* Teal Blue */
    border-radius:3px;
    height:3em;
    line-height:2em;
    
    
  }
  /* Form field background, border color, and shadow (When Active) */
  .content form input[type="text"]:focus,
  .content form input[type="password"]:focus,
  .content form input[type="date"]:focus,
  .content form input[type="datetime"]:focus,
  .content form input[type="datetime-local"]:focus,
  .content form input[type="month"]:focus,
  .content form input[type="week"]:focus,
  .content form input[type="email"]:focus,
  .content form input[type="number"]:focus,
  .content form input[type="search"]:focus,
  .content form input[type="tel"]:focus,
  .content form input[type="time"]:focus,
  .content form input[type="url"]:focus,
  .content form input[type="color"]:focus,
  .content form textarea:focus,
  .content form select:focus {
    background-color: rgba(164,215,244, .05);
    border-color: #484848; /* COMMITTEE COLOR */
    box-shadow: 0 0 5px #c4cfdd;
  }

  /* Form field border color (Mouse Over)*/
  .content form input[type="text"]:hover,
  .content form input[type="password"]:hover,
  .content form input[type="date"]:hover,
  .content form input[type="datetime"]:hover,
  .content form input[type="datetime-local"]:hover,
  .content form input[type="month"]:hover,
  .content form input[type="week"]:hover,
  .content form input[type="email"]:hover,
  .content form input[type="number"]:hover,
  .content form input[type="search"]:hover,
  .content form input[type="tel"]:hover,
  .content form input[type="time"]:hover,
  .content form input[type="url"]:hover,
  .content form input[type="color"]:hover,
  .content form textarea:hover,
  .content form select:hover {
    background-color: transparent; /* COMMITTEE COLOR */
    border-color: #484848; /* COMMITTEE COLOR */
  }


 /**********************************
  Select Box Styles
 **********************************/

  .content form select {
    background-color: transparent;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…J2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+) !important;
    background-position: 100% center;
    background-repeat: no-repeat;
    padding: 0.5rem 1.25rem 0.5rem 0.5rem;
    font-size: 0.875rem;
    color: #333333;
  }


 /*********************************
  Textarea Styles and States
 *********************************/ 

  .content form textarea {
    color: #333333;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3rem;
    margin: 0 0 1rem 0;
    padding: 0.5rem;
    height: 15.625rem;
    width: 100%;
  }


 /**********************************
  Radio Button Styles and States
 **********************************/

  /* Radio button background color */
  .at.ngp-form .label-amount input[type="radio"] + a {
    background-color:#484848; /* COMMITTEE COLOR */
  }

  /* Radio button background color (Mouse Over) */
  .at.ngp-form .label-amount input[type="radio"] + a:hover {background-color:#009edb;} /* COMMITTEE COLOR */

  /* Radio button background color (Selected) */
  .at.ngp-form .label-amount input[type="radio"]:checked + a,
  .at.ngp-form form .label-amount input:required {background-color:#009edb;} /* COMMITTEE COLOR */

  /* Radio button background color (Slected on Mouse Over) */
  .at.ngp-form .label-amount input[type="radio"]:checked + a:hover,
  .at.ngp-form form .label-amount input:required:hover {background-color:#009edb;} /* COMMITTEE COLOR */


 /*****************************
  Checkbox Styles and States
 ******************************/

  /* Checkbox Apperance */
  .at.ngp-form input[type="checkbox"]+span:before {
    height: 1.125rem;
    width: 1.125rem;
    background: transparent;
    border-radius: 2px;
    border: 1px solid #c4cfdd;
    color: inherit;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    top: 2px;
  }
  /* Checkbox :focus */
  .at.ngp-form input[type="checkbox"]:focus+span:before {
    box-shadow: 0 0 4px 0 #009edb; /* COMMITTEE COLOR */
    border-color: #009edb; /* COMMITTEE COLOR */
  }
  /* Checkbox :hover */
  .at.ngp-form input[type="checkbox"]:hover+span:before {
    border-color: #009edb; /* COMMITTEE COLOR */
  }
  /* Checkbox :active */
  .at.ngp-form input[type="checkbox"]:active+span:before {
    background-color: #009edb; /* COMMITTEE COLOR */
    border-color: #009edb; /* COMMITTEE COLOR */
  }
  /* Checkbox background and border color (Selected) */
  .at.ngp-form input[type="checkbox"]:checked + span::before {
    background-color:rgba(164,215,244,1); /* COMMITTEE COLOR */
    border-color:rgba(164,215,244,1); /* COMMITTEE COLOR */
  }


  /*********************************
   Multistep Form Style
  *********************************/

  body .at.ngp-form.multistep-layout.split-layout {
    max-width:750px;
    min-width:300px;
    width:53.57142857142857em;
  }

  .multistep-layout.split-layout section.at-inner {
    padding:0.625em 0;
  }

  .multistep-layout.split-layout header.HeaderHtml {
    float: none;
    width: 100%;
    margin-right: -1px;
    margin-bottom: 0;
    padding-top:1em;
  }

  .at.ngp-form.multistep-layout .HeaderHtml p {
    font-size: 1em;
    font-weight: 400;
    line-height: 1.6428571428571428em; /* Based on contianer font-size */
    padding: 0;
  }

  .multistep-layout.split-layout section.at-inner form {
    border:0;
    padding-top:1em;
    float: none;
    width: 100%;
  }

  .multistep-layout .FastAction {
    padding:0 0.625em;
    border-top:0;
    border-bottom:1px solid #c4cfdd;
    margin:0;
  }

  .multistep-layout .FastAction .fastAction {
    padding: 0 0 0.9375em;
  }

  .multistep-layout.split-layout ol.at-steps {
    border-top:0;
    background-color:transparent;
    padding:0;
    margin:0.625em 0 0;
  }

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

  .at.ngp-form ol.at-steps li.active {border-bottom-color:#F2F2F2;}
  .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.active>*:before {
    color: #fff;
  }

  .at .at-step>*:before {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    content: counter(step);
    counter-increment: step;
    position: absolute;
    text-align: center;
    left: 1.5rem;
    top: 50%;
    width: 20px;
    height: 20px;
    border: 1px solid transparent;
    border-radius: 20px;
    background-color: #F2F2F2;
    color: #4D4D4D;
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    z-index: 1;
  }

  .at.ngp-form ol.at-steps .at-step a,
  .at.ngp-form ol.at-steps .at-step b {
    border:0;
    display:block;
    font-size:inherit;
    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.label-amount {margin-bottom:0.4166666666666667em;}

  .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:0;
    padding:0;
  }

  .at.ngp-form .at-form-submit input.at-submit {margin:1.25em 0 0;}

  /* 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 Borders */
  .at.ngp-form .btn-at-primary {
    border-style: solid;
    border-width: 2px;
    cursor: pointer;
    display: inline-block;
    float:none;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.625em 0.9375em;
    transition: color .2s linear,border-color .2s linear;
    white-space:normal;
    width:100%;
  }

  .at.ngp-form .btn-at.prevStep {
    font-size:1em;
  }

  .at.ngp-form.multistep-layout .at-form-submit {margin:0;}
  .at.ngp-form .step-prevNext {padding:0.625em 0 0.9375em;}
  .at.ngp-form .step-prevNext .prevNext.next {float:right; width: 45%;}
  .at.ngp-form .step-prevNext .prevNext.prev {float:left; width: 45%;}


 /********************************
  Form Footer
 *********************************/

  .at.ngp-form section.at-inner footer.FooterHtml p {
    font-size:.75em; /* 12px */
    line-height: 2em;
  }

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

  .at.ngp-form section.at-inner footer.FooterHtml {
    margin-top: 1.3889em;
  }

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


 /********************************
  Donor Confirmation / Receipt
 *********************************/

  .at .at-form .thankYou {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding:1.25em 0.625em;
  }
  .at.ngp-form .thankYou .contributions h1 {
    color: #0066B2;
    font-family: "Georgia", serif;
    font-size: 4.5em;
    letter-spacing: 1px;
    margin: 0 0 -5px;
    text-align: center;
  }
  .at.ngp-form .thankYou section.contributions h2 {
    border-top: 1px solid #ccc;
    font-weight: 100;
    margin: 0 auto 3.75em;
    padding-top: 0.625em;
    text-align: center;
    width: 70%;
  }
  .at.ngp-form .at-form .contributions article,
  .at.ngp-form .at-form .contributions footer {
    margin:0 3em;
  }
  .at.ngp-form .at-form .contributions p {
    margin: 0 0 2em 0;
  }
  .at.ngp-form .at-form .contributions p a {
    font-size: 1em;
  }
  .at.ngp-form .at-form .contributions aside.transactionDetails {
    margin: 0 1.5em;
  }
  .at.ngp-form .at-form .contributions aside.salutations {
    margin: 3em 0 0 23em;
  }
  .at.ngp-form .at-form .contributions aside.salutations h3 {
    font-family: helvetica, arial, sans-serif;
    font-size: 1em;
    font-weight: 500;
  }
  .at.ngp-form .at-form .contributions .h-card {
    margin: 0 0 2em;
  }
  .at.ngp-form .at-form .contributions .h-card span {
    display:block;
  }
  .at.ngp-form .at-form .contributions footer p, 
  .at.ngp-form .at-form .contributions footer p strong {
    font-size:0.625em;
    margin:0;
    text-align: center;
  }


 /**********************************
  Social / Share Button Styles
 **********************************/

  .at.ngp-form .thankYou .btn-facebook, .at.ngp-form .thankYou .btn-twitter {
    border-radius: 30px;
    font-family: helvetica, arial, sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1em;
    margin: 2em 5em 1em 0;
    padding: 0.625em;
    width: 40px;
  }

  .at.ngp-form .thankYou .btn-social::before {
    display: inline-block;
    height: 18px;
    vertical-align: bottom;
    margin-right: 21px;
  }

  .at.ngp-form .thankYou .btn-facebook {
    background: #4065B4;
    border: 1px solid #4065B4;
    color: #4065B4;
    margin-left: 14em;
  }

  .at.ngp-form .thankYou .btn-facebook:hover {
    background-color: #3b5998;
  }

  .at.ngp-form .thankYou .btn-facebook::after {
    content: "";
  }

  .at.ngp-form .thankYou .btn-twitter {
    background: #1DA1F2;
    border: 1px solid #1DA1F2;
    color: #1DA1F2;
  }

  .at.ngp-form .thankYou .btn-twitter:hover {
    background: #0c7abf;
    color: #0c7abf;
  }

  .at.ngp-form .thankYou .btn-twitter::after {
    content: "";
  } 
}
 /********************************
  Media Queries
 *********************************/

/* Print Styles */
@media print {
  header.branding, 
  .at.ngp-form .thankYou .btn-facebook, 
  .at.ngp-form .thankYou .btn-twitter {
    display:none !important;
  }
  body .at.ngp-form {
    max-width: 8.5in;
    min-width:0;
    width:8.5in;
    margin:0 !important;
  }
  .at.ngp-form .at-form .contributions header {
    margin:0 0 32pt;
  }
  .at.ngp-form .thankYou .contributions h1 {
    color: #0066B2;
    font-family: "Georgia", serif;
    font-size: 50pt;
    letter-spacing: 1px;
    margin: 0;
    text-align: center;
  }
  .at.ngp-form .thankYou section.contributions h2 {
    border-top: 1px solid #ccc;
    font-weight: 100;
    margin: 0 auto;
    padding-top: 7.5pt;
    text-align: center;
    width: 5.95in;
  }
  .at.ngp-form .at-form .contributions article,
  .at.ngp-form .at-form .contributions footer {
    margin:0 36pt;
  }
  .at.ngp-form .at-form .contributions p {
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 0 0 24pt 0;
  }
  .at.ngp-form .at-form .contributions p a {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 12pt;
  }
  .at.ngp-form .at-form .contributions aside.transactionDetails {
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 0 18pt;
  }
  .at.ngp-form .at-form .contributions aside.salutations {
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 36pt 0 0 345pt;
  }
  .at.ngp-form .at-form .contributions aside.salutations h3 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 14pt;
  }
  .at.ngp-form .at-form .contributions .h-card {
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 0 0 45pt;
  }
  .at.ngp-form .at-form .contributions .h-card span {
    display:block;
  }
  .at.ngp-form .at-form .contributions footer p, 
  .at.ngp-form .at-form .contributions footer p strong {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size:7.5pt;
    margin:0;
  }

}
/* Mobile Screen Sizes Between 360px and 480px */
@media screen and (max-width: 480px) and (min-width: 360px) {
  * {
    font-family: helvetica,arial,sans-serif;
    font-size:0.935em;
  }
	body {background-color:rgba(72,72,72, .95);}

  header.branding {
    background-repeat:no-repeat;
    background-size:cover;
    background-position:100% 50%;
    position: relative;
  }
  header.branding figure {
    position:relative;
  }
  body .at.ngp-form, body .thankYou {
    color:#333;
    float:none; /* Sets Form Position In Page */
    max-width:480px;
    min-width:360px;
    width:100%;
  }
  .at .at-form .thankYou {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  /* Confirmation Page */
  .at .at-form .thankYou {
    margin:0;
  }
  /* Social Media Share Buttons */
  .at.ngp-form .thankYou .btn-facebook, .at.ngp-form .thankYou .btn-twitter {
    width: 32px;
  }
}
/* Mobile Media Query */
@media screen and (max-width: 320px) {
  body {
    background-attachment:fixed;
    background-position:100% 0;
    background-repeat:no-repeat;
    background-size:cover;
  }

  header.branding {
    background-attachment:fixed;
    background-position:100% 0;
    background-repeat:no-repeat;
    background-size:contain;
  }
}
@media screen and (max-width: 375px) and (min-width: 321px) {
  body {
    background-attachment:fixed;
    background-position:100% 0;
    background-repeat:no-repeat;
    background-size:cover;
  }
}
@media screen and (max-width: 425px) and (min-width: 376px) {
  body {
    background-attachment:fixed;
    background-position:100% 0;
    background-repeat:no-repeat;
    background-size:cover;
  }
}

/* Tablet Media Query */
@media screen and (max-width: 768px) and (min-width: 426px) {
  body {
    background-attachment:fixed;
    background-position: 25% 0;
    background-repeat:no-repeat;
    background-size:cover;
  }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  body {
    background-attachment:fixed;
    background-position:38% 0;
    background-repeat:no-repeat;
    background-size:cover;
  }
}

/* Desktop Media Query */
@media screen and (min-width: 1025px) {
  body {
    background-attachment:fixed;
    background-position:38% 0;
    background-repeat:no-repeat;
    background-size:cover;
  }
}